Javascript 限制逗号

Question

我有一个函数，可以在文本字段旁边显示该字段中字符数的倒计时(想想 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>

接下来的字段采用逗号分隔值。示例:

tomato, apple, orange, pear

我想将该列表限制为 5 个内容(以及 4 个逗号分隔)。

如何制作一个类似的函数来倒计时输入中的逗号数量。

我开始这样做，但它并没有改变跨度中的值。我的 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/>

有什么想法吗？

Answer 1

类似这样的内容(假设您有一个 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;
     }
}

示例位于 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/