Vérifiez la longueur du champ en tant que types d'utilisateurs

Question

Hé les gars, j'ai vu cette capacité sur le web et je ne savais pas trop comment la rechercher, un bon exemple est l'envoi d'un message texte, il dira que vous tapez :

132/160 - et le compteur 132 augmentera jusqu'à ce que vous atteigniez votre limite.

Ma question était est-il possible de travailler avec javascript seul, pas de bibliothèque jQuery? Cependant, si je dois utiliser jQuery je vais, peut-être un point à un bon tutoriel, ou peut-être qu'il est plus simple que cela, ou même quelques termes pour la rechercher, merci.

Answer 1

<!--This is your input box. onkeyup, call checkLen(...) --> 
<input type="text" id="myText" maxlength="200" onkeyup="checkLen(this.value)"> 

<!--This is where the counter appears --> 
<div id="counterDisplay">0 of 200</div> 


<!--Javascript Code to count text length, and update the counter--> 
<script type="text/javascript"><!-- 
    function checkLen(val){ 
     document.getElementById('counterDisplay').innerHTML = val.length + ' of 200'; 
    } 
//--></script> 

Answer 2

Je pense que j'ai trouvé une solution exacte à votre problème La fonction countChar prend un objet textbox et un objet div. L'objet div affichera le nombre de caractères restants.

function countChar(txtBox,messageDiv) 
    { 
     try 
     { 

      count = txtBox.value.length; 
      if (count < 160) 
      { 
       charLeft = 160 - count; 
       txt = charLeft + " characters left...keep typing!!"; 
       messageDiv.innerHTML="<font color=green>" + txt + "</font>"; 
      } 
      else 
      { 
       messageDiv.innerHTML="<font color=red>Message is too long</font>"; 
      } 
      } 
      catch (e) 
      { 

      } 
    } 

<INPUT type="text" id="txtMessage" 
    onkeyup="countChar(txtMessage,messagesuccess);" 
    onkeydown="if(event.keyCode == 13){document.getElementById('btnSendTextMessage').click();}" > 

Answer 3

Vous devrez connecter l'événement onkeyup de la zone de texte.

Vous pouvez ensuite valider/vérifier la longueur de la valeur de la zone de texte et (si vous souhaitez afficher le compteur à l'utilisateur) mettre à jour l'affichage du compteur si nécessaire.

Answer 4

Tout ce dont vous avez besoin est un gestionnaire de clés qui vérifie la longueur de la chaîne à l'intérieur de la zone de texte. Vous pouvez également fournir un attribut maxlength pour la zone de texte. Une fois que vous avez détecté que la chaîne franchit 160 (ou wateva la limite) caractères, vous pouvez fournir une zone d'alerte, puis rogner la chaîne sur ses 160 premiers caractères. Je ne vais pas vous fournir le code et vous nourrir à la cuillère. Il peut être facilement trouvé sur le Web.

Answer 5

Si vous utilisez l'événement onkeyup, je vais venir à votre page Web et maintenez ma touche enfoncée jusqu'à ce que je suis entré plus que le montant autorisé dans votre boîte d'entrée!

Utilisez le cas oninput, où (navigateurs les plus traditionnels et les derniers IE 9 prévisualisations) pris en charge et onpropertychange pour les anciens explorateurs Internet:

var myInput = document.getElementById("myInput"); 
if ("onpropertychange" in myInput && !("oninput" in myInput)) { 
    myInput.onpropertychange = function() { 
     if (event.propertyName == "value") 
      inputChanged.call(this, event); 
    } 
} 
else 
    myInput.oninput = inputChanged; 

function inputChanged() { 
    // Check the length here, e.g. this.value.length 
} 

Je suis allé plus en détail pourquoi onkeyup est un événement pauvre pour détecter entrée sur mon blog un certain temps - http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript.

Answer 6

Voici une solution simple.

En supposant que vous avez le code html comme suit

<textarea onKeyPress='return count(this);'></textarea> 
<input type="text" id="info" value="0/160" /> 

Remarque: l'identifiant de l'entrée/champ de texte est d'info.

Vous devez la méthode javascript suivant

function count(area){ 
    var proceed = area.value.length < 160; 
    document.getElementById('info').value = area.value.length+"/160"; 
    return proceed; 
} 

Remarque: l'identifiant du champ de texte spécifié dans la méthode et la taille est de 160.

Answer 7

ce code pour l'usage général:

html:

<input type="text" name="noteTitle" id="noteTitle" maxlength="100" onkeyup="checkLength(this,'titleLength')" /> 
<div id="titleLength">100</div> 

JS:

//take field (fieldToCheckMax), and its counterID(titleLength) 
function checkLength(fieldToCheckMax,counterID){ 

//get the maxallowed for the input 
maxAllowed=fieldToCheckMax.getAttribute('maxlength'); 
//save the affected counter in a variable 
counterID=document.getElementById(counterID); 
//change the value based on the max allowed, to switch between green and red 
counterID.innerHTML=colorChanger(); 
//the color based checker, to decide is it red or green 
function colorChanger(){ 
    if(fieldToCheckMax.value.length < maxAllowed) { 
     counterID.style.color='green'; 
     return maxAllowed-fieldToCheckMax.value.length;} 
    else { 
    counterID.style.color='red'; 
    return maxAllowed-fieldToCheckMax.value.length; 
    } 

} 
}