Javascript limite Commas

Question

J'ai une fonction qui affiche un compte à rebours à côté d'un champ de texte pour le nombre de caractères dans le champ (pensez 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> 

Et le champ suivant prend jusqu'à une valeur séparées par des virgules. Exemple:

tomate, pomme, orange, poire

et je voudrais limiter cette liste à 5 choses (et 4 virgules séparent).

Comment faire une fonction similaire qui compte à rebours pour le nombre de virgules dans l'entrée. Je suis un débutant en Javascript et en développement Web tous ensemble, si nue avec moi si vous le pouvez.

Merci d'avance.

J'ai démarré ceci, mais cela ne change pas la valeur dans l'intervalle. mon 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> 

et mon html (je pense que le problème est ici)

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

Toutes les idées? (Rappelez-vous: Je suis nouveau à JS)

Answer 1

Quelque chose comme ceci (en supposant que vous avez un champ de texte avec 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; 
    } 
} 

exemple à http://www.jsfiddle.net/gaby/YEHXf/2/

---

Réponse Mise à jour

Vous semblez avoir mélangé parties de jQuery dans votre code et qui provoque le script à l'échec

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

exemple en direct à http://jsfiddle.net/z4KRd/

Answer 2

ici est une solution :

Test: http://jsbin.com/ulobu3

Code: http://jsbin.com/ulobu3/edit

si vous jamais utilisé jsBin avant, c'est très facile, sur le côté gauche vous avez le code javascript (comme s'il était dans votre code HTML , et dans votre côté droit vous avez le code html.

et vous avez juste besoin d'ajouter /edit à la fin d'une url jsbin pour éditer ce code, et enregistrer les nouvelles révisions à ce code.

J'ai ajouté le framework jQuery pour rendre l'exemple plus rapide au code.