Longueur maximale pour le code HTML <textarea>

Question

Comment limiter le nombre maximal de caractères pouvant être entrés dans un code HTML <textarea>? Je suis à la recherche d'une solution cross-browser.

Answer 1

La balise TEXTAREA ne dispose pas d'un attribut MAXLENGTH la façon dont une balise INPUT fait, du moins pas dans la plupart des navigateurs standard. Une façon très simple et efficace pour limiter le nombre de caractères qui peuvent être tapé dans une balise TEXTAREA est:

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

Note:onKeyPress, va empêcher toute pression sur le bouton, tout boutony compris la touche de retour arrière. Cela fonctionne parce que l'expression booléenne compare la longueur du champ avant que le nouveau caractère soit ajouté à la longueur maximum que vous voulez (50 dans cet exemple, utilisez le vôtre ici), et retourne vrai s'il y a de la place pour un de plus, false sinon. Renvoyer false à partir de la plupart des événements annule l'action par défaut. Ainsi, si la longueur actuelle est déjà 50 (ou plus), le gestionnaire renvoie false, l'action KeyPress est annulée et le caractère n'est pas ajouté.

Une mouche dans la pommade est la possibilité de coller dans un TEXTAREA, qui ne provoque pas l'événement KeyPress au feu, contourner ce contrôle. Internet Explorer 5+ contient un événement onPaste dont le gestionnaire peut contenir la vérification . Cependant, notez que vous devez également prendre en compte combien de caractères attendent dans le presse-papiers pour savoir si le total va à vous dépasser ou non. Heureusement, IE contient également un objet du presse-papiers à partir de l'objet fenêtre. 1 Ainsi:

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

Encore une fois, l'événement onPaste et clipboardData objet sont IE 5+ uniquement. Pour une solution multi-navigateur, il vous suffira d'utiliser un gestionnaire OnChange ou OnBlur pour vérifier la longueur et la gérer comme vous le souhaitez (tronquer la valeur en silence, notifier l'utilisateur, etc.). Malheureusement, ceci n'attrape pas l'erreur comme cela se produit, seulement lorsque l'utilisateur tente de quitter le terrain, ce qui n'est pas tout à fait aussi amical.

Source

En outre, il y a une autre façon ici, y compris un script terminé, vous pouvez inclure dans votre page:

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

Answer 2

HTML5 permet désormais maxlength attribute on <textarea>.

Il est supporté par tous les navigateurs sauf IE < = 9 et iOS Safari 8.4. Voir support table on caniuse.com.

Answer 3

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

Référence Set maxlength in Html Textarea