Comment appliquer dynamiquement la longueur maximale du texte dans les zones de texte à l'aide de JavaScript ?

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 à l'intégralité du contenu de la page lors du chargement, y compris toutes les zones de texte.

window.onload = function() {

Maintenant, nous pouvons parcourir le document en recherchant 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 < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {

Pour chaque zone de texte qualifiante, nous définissons une fonction de rappel pour valider la longueur maximale. Cette fonction va :

1. Récupérer la valeur de l'attribut maxlength sous forme d'entier
2. Vérifier si la longueur actuelle de la valeur de la zone de texte dépasse la longueur maximale
3. Si elle est dépassée , 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 à la fois 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 qualificatives d'une page Web sans avoir besoin de gérer des événements répétitifs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!