Application d'une longueur maximale aux zones de texte HTML à l'aide de JavaScript Comment pouvez-vous imposer une longueur maximale aux zones de texte éléments en HTML en utilisant du JavaScript pur sans recourir à jQuery ? Cette question se pose lorsque vous souhaitez contrôler la quantité de saisie utilisateur et éviter les débordements de texte.</p> <p>Une méthode consiste à gérer les événements de pression de touche à l'aide des attributs onkeypress et onkeyup dans chaque zone de texte :</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50"> function imposeMaxLength(event, object, maxLength) { return (object.value.length <= maxLength) || (event.keyCode == 8 || event.keyCode == 46 || (event.keyCode >= 35 && event.keyCode <= 40)); } Copier après la connexion Cependant, l'ajout manuel de ces attributs à chaque zone de texte peut devenir fastidieux. Voici une approche alternative qui automatise le processus : window.onload = function() { var txts = document.getElementsByTagName('TEXTAREA'); for (var i = 0, l = txts.length; i < l; i++) { if (/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { var func = function() { var len = parseInt(this.getAttribute("maxlength"), 10); if (this.value.length > len) { alert('Maximum length exceeded: ' + len); this.value = this.value.substr(0, len); return false; } } txts[i].onkeyup = func; txts[i].onblur = func; } } };Copier après la connexion Ce script s'initialise au chargement de la page et parcourt tous les fichiers éléments du document. Pour chaque zone de texte avec un attribut numérique maxlength, il définit une fonction qui vérifie si le texte dépasse la limite. Si tel est le cas, il alerte l'utilisateur et tronque l'entrée à la longueur maximale. En attribuant cette fonction aux événements onkeyup et onblur, la restriction maxlength est appliquée automatiquement sans qu'il soit nécessaire d'attacher manuellement des gestionnaires d'événements.</p>
