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とWeb開発の初心者ですので、できれば私と一緒に裸にしてください。

ありがとうございます。

これを開始しましたが、スパンの値は変更されません。 私の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

あなたが混在しているように見えるhttp://www.jsfiddle.net/gaby/YEHXf/2/

---

更新回答

で（たとえば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; 
    } 
} 

例コード内のjQueryの一部http://jsfiddle.net/z4KRd/

Answer 2

はソリューションです：あなたが前にjsBinを使用したことがない場合は、http://jsbin.com/ulobu3/edit

：

テスト：http://jsbin.com/ulobu3

コードそれは非常に簡単です、の左側にあなたは、あなたのHTMLコードにあった場合のようなJavaScriptコードがありますあなたのの右側にはのhtmlコードがあります。

このコードを編集するには、/editをjsbin URLの末尾に追加して、そのコードに新しいリビジョンを保存するだけです。

jQueryフレームワークを追加して、コードを高速化する例を作成しました。