jQuery: Compter des Caractères de plusieurs Champs de Saisie

Dans cet embout, je vous montre comment compter les caractères de plusieurs champs d'entrée à l'aide de jQuery et comment afficher et rester à jour le résultat.

Le HTML

Sur notre site HTML, il existe 4 champs différents de type "input" avec les noms "a", "b", "c" et "d". De plus, nous avons placé un texte avec lequel le nombre de caractères actuel doit être affiché sous les champs.

<input name="a" value="" class="count">
<input name="b" value="" class="count">
<input name="c" value="" class="count">
<input name="d" value="">

<p>Caractères utilisés: <span id="countdisplay">0</span></p>

Important: Nous avons attribué la classe "count" à tous les champs  à compter. Ce sont les champs d'entrée "a", "b" et "c" dans l'exemple. Nous voulons exclure le champ de saisie "d" du comptage, c'est pourquoi nous n'avons pas affecté la classe "count" à ce champ.

Les caractères utilisés doivent être affichés dans le champ "countdisplay" plus tard. Nous avons attribué l'ID "countdisplay" dans cette zone afin que nous puissions modifier la valeur facilement. Dans notre code source HTML, nous avons défini la valeur sur 0, car tous nos champs n'ont aucun contenu (valeur=""). Si nous utilisons des valeurs initiales pour les champs de saisie, nous pouvons naturellement ajuster ce numéro.

Le Code JavaScript/jQuery

Allons à notre code JavaScript respectivement jQuery:

$(document).ready(function() {
  $(".count").keyup(function() {
    var c = 0;
 
    $.each($(".count"), function() {
      c += $(this).val().length;
    });
	 
    $("#countdisplay").text(c);
  });
});

Avec le sélecteur $(".count"), nous sélectionnons tous les champs avec la classe "count", en d'autres termes, tous les champs qui doivent être comptés. Nous attribuons la fonction pour compter les champs et afficher le résultat à l'événement clé de ces champs.

Après cela, nous fixons notre variable de comptage "c" à 0. Ensuite, nous traversons tous les champs avec la classe "count" à l'aide de $.each() et nous récupérons la longueur de leur contenu avec .val(). Nous résumons le résultat dans la variable "c".

À la fin, nous définissons le contenu de "countdisplay" sur "c", de sorte que le nombre de caractères déterminé s'affiche là-bas. Si nous avons initialisé les champs de saisie avec des valeurs initiales, nous pouvons également appeler la fonction de comptage immédiatement après avoir chargé la page pour déterminer la valeur actuelle.