22 Voix

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

Conseil de Stefan Trost | 12/04/2022 à 23:27

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.

RépondrePositifNégatif

Sur l’Auteur

AvatarVous pouvez trouver des logiciels de Stefan Trost sur fr.sttmedia.com. Avez-vous besoin d'un logiciel personnalisé selon vos propres besoins? Écrivez-nous: fr.sttmedia.com/contact
Voir Profil

 

Sujets Connexes

Types de Sujets sur askingbox.com

Article | 0 Commentaires

La Recherche Askingbox

Info | 0 Commentaires

Avis Important

Veuillez noter: Les contributions publiées sur askingbox.com sont des contributions d’utilisateurs et ne doivent pas remplacer les conseils d’un professionnel. Ils ne sont pas vérifiés par des indépendants et ne reflètent pas nécessairement l’opinion de askingbox.com. Apprendre encore plus.

Participer

Posez votre propre question ou écrivez votre propre article sur askingbox.com. Voici comment.