Longueur maximale pour HTML <textarea>

Question

Comment restreindre le nombre maximum de caractères pouvant être saisis dans un code HTML <textarea>?Je recherche une solution multi-navigateurs.

Answer 1

Le TEXTAREA la balise n'a pas de MAXLENGTH attribuer la façon dont unINPUT tag le fait, du moins pas dans la plupart des navigateurs standards.Un moyen très simple et efficace de limiter le nombre de caractères pouvant être tapé dans une TEXTAREA la balise est :

<textarea onKeyPress="return ( this.value.length < 50 );"></textarea>

Note: onKeyPress, va empêcher toute pression sur un bouton, n'importe quel bouton y compris la touche Retour arrière.

Cela fonctionne parce que l'expression booléenne compare la longueur du champ avant que le nouveau caractère ne soit ajouté à la longueur maximale que vous souhaitez (50 dans cet exemple, utilisez le vôtre ici) et revient vrai s'il y a de la place pour un autre, false sinon.Le renvoi de false pour la plupart des événements annule l'action par défaut.Donc, si la longueur actuelle est déjà de 50 (ou plus), le gestionnaire renvoie faux, le KeyPress l'action est annulée et le personnage n'est pas ajouté.

Le problème est la possibilité de le coller dans un TEXTAREA, qui ne provoque pas le KeyPress événement à déclencher, contournant cette vérification.Internet Explorer 5+ contient un onPaste événement dont le gestionnaire peut contenir le chèque.Cependant, notez que vous devez également prendre en compte le nombre de caractères qui attendent dans le presse-papiers pour savoir si le total va vous emmener au-dessus de la limite ou non.Heureusement, IE contient également un objet de presse-papiers de l'objet Window.1 Ainsi:

<textarea onKeyPress="return ( this.value.length < 50 );"
onPaste="return (( this.value.length +
window.clipboardData.getData('Text').length) < 50 );"></textarea>

Encore une fois, le onPaste événement et clipboardData Les objets sont IE 5+ uniquement.Pour une solution cross-browser, il vous suffira d'utiliser un OnChange ou OnBlur gestionnaire pour vérifier la longueur et la gérer comme vous le souhaitez (tronquer la valeur silencieusement, avertir l'utilisateur, etc.).Malheureusement, cela ne détecte pas l'erreur au moment où elle se produit, uniquement lorsque l'utilisateur tente de quitter le champ, ce qui n'est pas aussi convivial.

Source

Il existe également un autre moyen ici, y compris un script terminé que vous pouvez inclure dans votre page :

http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html

Answer 2

HTML5 permet désormais maxlength attribut sur <textarea>.

Il est pris en charge par tous les navigateurs sauf IE <= 9 et iOS Safari 8.4.Voir tableau d'assistance sur caniuse.com.

Answer 3

$(function(){  
  $("#id").keypress(function() {  
    var maxlen = 100;
if ($(this).val().length > maxlen) {  
  return false;
}  
})
});  

Référence Définir la longueur maximale dans la zone de texte HTML