Comment appliquer des limites de caractères sur les zones de texte en HTML sans gestionnaires d'événements ?

Application des limites de caractères TextArea en HTML avec JavaScript

En développant la fonctionnalité fournie par l'attribut HTML maxlength, JavaScript offre une solution polyvalente pour automatiquement imposer des limites de caractères sur les zones de texte. En éliminant le besoin de gestion manuelle des événements, cette approche fournit un moyen simple et efficace d'appliquer des restrictions de saisie.

Imposer Maxlength sans gestionnaires d'événements

L'approche conventionnelle de limitation Les caractères textarea impliquent l'utilisation de gestionnaires d'événements comme onkeypress ou onkeyup. Cependant, cela devient fastidieux lorsqu'il faut spécifier des limites pour plusieurs zones de texte.

JavaScript permet une solution plus élégante qui contourne la gestion explicite des événements :

<code class="javascript">window.onload = function() {
  // Retrieve all text areas on the page
  var txts = document.getElementsByTagName('TEXTAREA');

  // Loop through each text area
  for(var i = 0, l = txts.length; i < l; i++) {
    // If the textarea has a valid maxlength attribute (numeric value)
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {
      // Define a function to handle maxlength enforcement
      var func = function() {
        var len = parseInt(this.getAttribute("maxlength"), 10);

        // Check if the input length exceeds the limit
        if(this.value.length > len) {
          // Alert the user and truncate the input
          alert('Maximum length exceeded: ' + len);
          this.value = this.value.substr(0, len);
          return false;
        }
      }

      // Assign the function to the onkeyup and onblur events
      txts[i].onkeyup = func;
      txts[i].onblur = func;
    }
  };
};</code>

Détails de mise en œuvre

• window.onload : Exécute le script une fois la page chargée.
• getElementsByTagName : Récupère tous les éléments de la zone de texte sur le page.
• Test Regex : Vérifiez si l'attribut maxlength est une valeur numérique valide.
• func: Définit une fonction qui vérifie si l'entrée length dépasse la longueur maximale et tronque l'entrée si nécessaire.
• Gestion des événements : Attribue la fonction func aux événements onkeyup et onblur pour chaque zone de texte avec un attribut maxlength valide.

Avantages

• Application automatique : Les limites de caractères sont automatiquement imposées sans nécessiter de gestion manuelle des événements pour chaque zone de texte.
• Facilité de mise en œuvre : Le script fourni simplifie le processus d'application de maxlength sur plusieurs zones de texte.
• Approche modulaire : La logique d'application de maxlength est autonome dans un fonction, ce qui le rend facile à réutiliser ou à personnaliser.

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!