Limite de caractères textarea

J'ai trouvé une bonne solution qui utilise l'attribut maxlength si le navigateur le prend en charge, et retombe dans un pollyfill javascript discret dans les navigateurs sans assistance.

Grâce au commentaire de @Dan Tello, je l'ai réparé, donc cela fonctionne aussi dans IE7 +:

HTML:

 <textarea maxlength="50" id="text">This textarea has a character limit of 50.</textarea> 

Javascript:

 function maxLength(el) { if (!('maxLength' in el)) { var max = el.attributes.maxLength.value; el.onkeypress = function () { if (this.value.length >= max) return false; }; } } maxLength(document.getElementById("text")); 

Démonstration

Il n'existe pas un attribut minlength dans HTML5.
Pour les types de saisie suivants: number , range , date , date , date , datetime datetime-local time , month , time et week (qui ne sont pas encore entièrement pris en charge ), utilisez les attributs min et max .

Ceci n'est pas testé mais il devrait faire ce dont vous avez besoin.

Mise à jour: voici un jsfiddle à regarder. Il semble fonctionner. lien

Vous l'avez passé dans un fichier js et le référencer après votre référence jquery. Vous l'appelez comme ça …

 $("textarea").characterCounter(200); 

Une brève explication de ce qui se passe …

Sur chaque événement de touche, la fonction vérifie le type de touche enfoncée. Si cela est acceptable, le compteur vérifiera le nombre, réduira tout excès et empêchera toute autre entrée une fois que la limite sera atteinte.

Le plugin devrait également être collé dans la cible.

  ; (function ($) { $.fn.characterCounter = function (limit) { return this.filter("textarea, input:text").each(function () { var $this = $(this), checkCharacters = function (event) { if ($this.val().length > limit) { // Trim the string as paste would allow you to make it // more than the limit. $this.val($this.val().substring(0, limit)) // Cancel the original event event.preventDefault(); event.stopPropagation(); } }; $this.keyup(function (event) { // Keys "enumeration" var keys = { BACKSPACE: 8, TAB: 9, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40 }; // which normalizes keycode and charcode. switch (event.which) { case keys.UP: case keys.DOWN: case keys.LEFT: case keys.RIGHT: case keys.TAB: break; default: checkCharacters(event); break; } }); // Handle cut/paste. $this.bind("paste cut", function (event) { // Delay so that paste value is captured. setTimeout(function () { checkCharacters(event); event = null; }, 150); }); }); }; } (jQuery)); 

Cela fonctionne sur la saisie et la pâte, il colore le texte en rouge lorsque vous êtes presque jusqu'à la limite, le tronque lorsque vous passez et vous avertit d'éditer votre texte, ce que vous pouvez faire.

Var t2 = / * référence textarea * /

 t2.onkeyup= t2.onpaste= function(e){ e= e || window.event; var who= e.target || e.srcElement; if(who){ var val= who.value, L= val.length; if(L> 175){ who.style.color= 'red'; } else who.style.color= '' if(L> 180){ who.value= who.value.substring(0, 175); alert('Your message is too long, please shorten it to 180 characters or less'); who.style.color= ''; } } } 

Je pense que faire cela pourrait être plus facile que la plupart des gens pensent!

Essaye ça:

 var yourTextArea = document.getElementById("usertext").value; // In case you want to limit the number of characters in no less than, say, 10 // or no more than 400. if (yourTextArea.length < 10 || yourTextArea.length > 400) { alert("The field must have no less than 10 and no more than 400 characters."); return false; } 

Permettez-moi de savoir que cela a été utile. Et si oui, votez-vous! THX!

Daniel

L'utilisation de l'attribut maxlength de textarea ferait le tour … code html simple … pas JS ou JQuery ou Server Side Check Required ….

Essayez d'utiliser jQuery pour éviter les problèmes de compatibilité de navigateur croisé …

 $("textarea").keyup(function(){ if($(this).text().length > 500){ var text = $(this).text(); $(this).text(text.substr(0, 500)); } }); 

Version jQuery universelle rapide et sale. Prise en charge copier / coller.

 $('textarea[maxlength]').on('keypress mouseup', function(){ return !($(this).val().length >= $(this).attr('maxlength')); }); 

J'ai écrit ma méthode pour cela, amusez-vous à le tester sur vos navigateurs et donnez-moi des commentaires.

à votre santé.

 function TextareaControl(textarea,charlimit,charCounter){ if( textarea.tagName.toLowerCase() === "textarea" && typeof(charlimit)==="number" && typeof(charCounter) === "object" && charCounter.innerHTML !== null ){ var oldValue = textarea.value; textarea.addEventListener("keyup",function(){ var charsLeft = charlimit-parseInt(textarea.value.length,10); if(charsLeft<0){ textarea.value = oldValue; charsLeft = charlimit-parseInt(textarea.value.length,10); }else{ oldValue = textarea.value; } charCounter.innerHTML = charsLeft; },false); } } 

 ... onkeydown="if(value.length>500)value=value.substr(0,500); if(value.length==500)return false;" ... 

Cela devrait fonctionner.