Un guide complet pour imposer une longueur maximale aux zones de texte en HTML à l'aide de JavaScript

Dans le développement Web, il est souvent nécessaire de contrôler la longueur maximale du texte saisi dans le texte zones. Ce scénario nécessite que vous appliquiez automatiquement l'attribut maxlength sur plusieurs zones de texte. Alors que les solutions précédentes impliquaient une gestion manuelle des événements pour chaque zone de texte, nous explorerons une approche alternative qui élimine le besoin de code répétitif.

Solution :

La clé de cette solution réside dans la capacité de JavaScript pour analyser la page à la recherche de toutes les zones de texte et ajouter dynamiquement des écouteurs d'événements à ceux appropriés. En tirant parti de l'événement onload, nous avons accès au contenu entier de la page lors du chargement, y compris toutes les zones de texte.

window.onload = function() {

Maintenant, nous pouvons parcourir le document, recherche de tous les éléments avec la balise TEXTAREA :

var txts = document.getElementsByTagName('TEXTAREA');

Ensuite, nous parcourons chaque zone de texte pour vérifier si elle possède un attribut maxlength valide . Notez que nous utilisons une expression régulière pour garantir que la valeur maxlength est un nombre.

for(var i = 0, l = txts.length; i 
Pour chaque zone de texte qualifiante, nous définissons une fonction de rappel pour valider la longueur maximale . Cette fonction :
Récupérer la valeur de l'attribut maxlength sous forme d'entier
Vérifier si la longueur actuelle de la valeur de la zone de texte dépasse la longueur maximale
En cas de dépassement , affichez un message d'alerte et tronquez la valeur à la longueur maximale autorisée
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;
    }
}
Enfin, nous attachons cette fonction de rappel aux événements keyup et Blur de la zone de texte.
txts[i].onkeyup = func;
txts[i].onblur = func;
Cette approche globale fournit une solution transparente pour imposer automatiquement une longueur maximale à toutes les zones de texte qualifiantes d'une page Web sans avoir besoin de gestion d'événements répétitifs.