Explication détaillée du comportement étrange de l'attribut maxlength dans les compétences textarea_javascript

HTML5 a apporté de nombreux changements aux formulaires, comme maxlength, dont nous allons parler aujourd'hui. Cet attribut peut limiter le nombre maximum de caractères saisis dans la zone de saisie. Ce qui est plus pratique, c'est que le contenu collé peut également. être automatiquement tronqué en fonction du nombre de caractères.

J'ai récemment reçu une demande visant à limiter la saisie des utilisateurs à un maximum de 600 caractères (les caractères chinois et les lettres ne sont pas distingués), et le contenu collé doit également être automatiquement tronqué. Après la saisie de 600 caractères, la saisie ne peut pas être effectuée.

La première chose à laquelle j'ai pensé était maxlength, qui répond essentiellement aux besoins, mais il y a quand même des comportements bizarres.

Regardez le code ci-dessous :

<textarea name="text" id="text" maxlength="600"></textarea>
<p><span id="already"></span>/<span>600</span></p>
text.oninput = function() {
  already.textContent = text.value.length;
}

Le code ci-dessus limite le nombre de caractères saisis à 600 et surveille la saisie de l'utilisateur via oninput n'est pas utilisé car keydown ne peut surveiller que la saisie au clavier de l'utilisateur et n'a aucune réponse au collage. . . oninput peut le faire.

À ce stade, après avoir saisi directement 600 mots, vous ne pouvez plus en supprimer et en saisir à nouveau, et les performances seront normales. Ce qui est étrange, c'est que si vous collez beaucoup de texte dans une zone de texte, il sera automatiquement tronqué en raison de l'existence de maxlength. À ce moment-là, il y a exactement 600 caractères dans la zone de texte. puis essayez à nouveau de saisir, vous trouverez :

Putain de merde, je ne sais pas taper ! ! ! Supprimez-en davantage et vous pouvez continuer à taper, mais ! ! ! Lorsque j’ai saisi moins de 600 caractères, je n’ai soudainement plus pu saisir ! ! !

Cela se produit sous Chrome et sur ma machine Android. . La raison n'est pas encore connue. Après avoir testé l'entrée, cette situation ne se produira pas, et si la valeur de l'attribut maxlength est plus petite, cette situation ne se produira pas, comme 10. . .

Dans ce cas, maxlength n'est pas fiable. Écrivez simplement plus de code vous-même. Puisque oninput est si flexible, utilisez-le.

Modifiez le code, supprimez l'attribut maxlength de textarea et utilisez input pour surveiller la valeur de textarea Si elle dépasse 600, elle sera automatiquement tronquée, créant l'illusion que la saisie est impossible.

text.oninput = function() {
  if(text.value.length >= 600) {
    text.value = text.value.substr(0,600);
  }
  already.textContent = text.value.length;
}

Si vous n'êtes pas inquiet, vous pouvez continuer à surveiller l'événement keydown et empêcher l'événement par défaut après avoir saisi plus de 600 caractères. Cependant, il existe plusieurs touches qui ne peuvent pas être interdites : supprimer le retour arrière et le retour chariot :

text.onkeydown = function() {
  if(text.value.length >= 600) {
    // 删除:46 退格:8 回车:13
    if (!(e.which == '46' || e.which == '8' || e.which == '13')) {
      e.preventDefault();
    }
   }
}

IE8 et versions antérieures ne prennent pas en charge l'attribut maxlength ni oninput, mais ils ont une méthode plus puissante : onpropertychange.

Ce qui suit explique comment textarea implémente l'attribut maxlength à une extrémité du code

<script language="javascript" type="text/javascript"> 
function textlen(x,y){ 
 var thelength = x.value.length; 
 window.status=thelength+' of '+y+' maximum characters.'; 
} 
function maxtext(x,y){ 
 tempstr = x.value 
 if(tempstr.length>y){ 
  x.value = tempstr.substring(0,y); 
 } 
 textlen(x,y); 
} 
</script> 
<form name="myform"> 
   <textarea name="mytextarea"  
              cols="45"  
              rows="3"  
              wrap="virtual"  
              onkeypress="return(this.value.length<20)" 
              onkeydown="textlen(this,20)"  
              onkeyup="textlen(this,20)"  
              onblur="maxtext(this,20)">
   </textarea> 
</form>