Question

I have a function that displays a countdown next to a text field for the number of characters in the field (think twitter)

<script language="javascript" type="text/javascript">
function countDown(control, maxLen, counter, typeName) {
     var len = control.value.length;
     var txt = control.value;
     var span = document.getElementById(counter);
     span.style.display = '';
     span.innerHTML = (maxLen - len);
     if (len >= (maxLen - 10)) {
          span.style.color = 'red';
     } else {
          span.style.color = '';
     }
}
</script>

And the next field down takes a comma separated value. Example:

tomato, apple, orange, pear

and I’d like to limit that list to 5 things (and 4 separating commas).

How can I make a similar function that counts down for the number of commas in the input.

I got this started, but it’s not changing the value in the span.
my Javascript

<script language="javascript" type="text/javascript">
    var max = 5;

    function commaDown(area,ticker){

    // our text in the textarea element
    var txt = area.val();

    // how many commas we have?
    var commas = txt.split(",").length;

    var span = document.getElementById(ticker);

    //var commas ++;
    if(commas > max) {
      // grab last comma position
      var lastComma = txt.lastIndexOf(",");
      // delete all after last comma position
      area.val(txt.substring(0, lastComma));
      //it was count with + 1, so let's take that down
      commas--;
    }
    if (txt == '') {
      commas = 0;
    }
    // show message
    span.innerHTML = (max-commas);
  }
</script>

and my html (I think the problem lies here)

<input id="choices" type="text" name="choices" class="text medium" onkeyup="commaDown('choices','limit');"/> <span id="limit">5</span><br/>

Any ideas?

Answer 1

Something like this (assuming you have a text field with id csv)

document.getElementById('csv').onkeydown = function(e){
    if (!e) var e = window.event;
    var list = this.value.split(',');
     if (list.length == 5 && e.keyCode  ==  '188' )
     {
         // what to do if more than 5 commas(,) are entered
         // i put a red border and make it go after 1 second
         this.style.borderColor ='red';
         var _this  =  this;
         setTimeout(function(){
              _this.style.borderColor='';
              _this.disabled=false;
         },1000);
         // return false to forbid the surplus comma to be entered in the field
         return false;
     }
}

example at http://www.jsfiddle.net/gaby/YEHXf/2/

---

Updated Answer

You seem to have mixed parts of jQuery in your code and that causes the script to fail

    var max = 5;

    function commaDown(_area, _ticker){
    var area = document.getElementById(_area);

    // our text in the textarea element
    var txt = area.value;

    // how many commas we have?
    var commas = txt.split(",").length;

    var span = document.getElementById(_ticker);

    //var commas ++;
    if(commas > max) {
      // grab last comma position
      var lastComma = txt.lastIndexOf(",");
      // delete all after last comma position
      area.value = txt.substring(0, lastComma);
      //it was count with + 1, so let's take that down
      commas--;
    }
    if (txt == '') {
      commas = 0;
    }
    // show message
    span.innerHTML = (max-commas);
  }

live example at http://jsfiddle.net/z4KRd/