Запятые в JavaScript

Question

У меня есть функция, которая отображает обратный отсчет рядом с текстовым полем для количества символов в поле (подумайте в твиттере)

<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>

И следующее поле вниз принимает значение, разделенное запятыми.Пример:

помидор, яблоко, апельсин, груша

, и я хотел бы ограничить этот список 5 вещами (и 4 разделительными запятыми).

Как я могу сделать аналогичную функцию, которая отсчитывает количество запятых на входе.Я новичок в Javascript и веб-разработке вместе, поэтому держитесь за меня, если можете.

Заранее спасибо.

Я начал, но это не меняет значение впяди.мой 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>

и мой HTML (я думаю, что проблема заключается здесь)

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

Есть идеи?(помните: я новичок в JS)

Answer 1

Примерно так (при условии, что у вас есть текстовое поле с идентификатором 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;
     }
}

пример на http://www.jsfiddle.net/gaby/YEHXf/2/

---

Обновленный ответ

Вы, кажется, смешали части jQuery в своем коде, и это приводит к сбою сценария

    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);
  }

живой пример на http://jsfiddle.net/z4KRd/

Answer 2

вот решение :

тест : http://jsbin.com/ulobu3

код : http://jsbin.com/ulobu3/edit

Если вы никогда раньше не использовали jsBin , это очень легко, с левой стороны 1018 * у вас есть код JavaScript (как если бы он был в вашем HTML-коде и в вашем правая сторона у вас есть html-код.

и вам просто нужно добавить /edit в конец URL-адреса jsbin, чтобы отредактировать этот код и сохранить все новые ревизии в этом коде.

Я добавил фреймворк jQuery для ускорения написания примера.