Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:23:20
original
1489 Les gens l'ont consulté

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;
}
Copier après la connexion

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;
}
Copier après la connexion

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();
    }
   }
}
Copier après la connexion

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> 
Copier après la connexion

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal