41Mag - Tutoriel : Un Compteur de mots et de caractères comme Twitter sur un champ de formulaire Textarea en jQuery

Tutoriel : Un Compteur de mots et de caractères comme Twitter sur un champ de formulaire Textarea en jQuery

Dans ce tutoriel, nous allons vous détaillé comment créer un compteur de mot et de caractère sur un champ de formulaire Textarea.

A l’instar de Twitter, nous allons créer un compteur de caractère, avec décompte des caractère restant, et de mot. Notre compteur de mot devra se mettre à jour après chaque lettre tapé par un visiteur et lui indiquez aussitôt le nombre de mot et le nombre de caractère qu’il a frappé.

Nous vous détaillerons pas à pas les différentes étapes de création. Bien qu’elle ne soit pas obligatoire, une connaissance minimum en HTML5 est souhaitée pour la compréhension. En savoir plus sur  : le HTML5, tutoriel complet.

Le résultat final

Introduction

Notre tutoriel se déroulera dans l’ordre suivant :

  1. Création d’une page web simple avec un formulaire contenant un champ de type Textarea
  2. Relier la bibliothèque jQuery
  3. Relier le CSS
  4. Création de l’espace reservé à l’affichage du compteur
  5. Le script jQuery
  6. La mise en page en CSS
  7. Option : affichage du nombre de caractères restant

Création d’une page web et d’un formulaire contenant un champ de type Textarea

Nous allons créer une page web toute simple, avec un titre et un formulaire. A l’intérieur de ce formulaire, nous aurons un champ d’entrée de type Textarea. Notre tutoriel s’orientera uniquement sur notre compteur de mot et de caractère, par conséquent, notre formulaire ne sera pas envoyé, ni traité. A vous de modifier ou d’intégrer ce compteur à vos projets.

Voici donc le code source HTML5 sur lesquels nous appliqueront notre compteur :

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Démo d'un compteur de mot et de caractere en jQuery</title>
</head>
<body>
<h1>Démo d'un compteur de mot et de caractere en jQuery</h1>
<form>
  <textarea id="message" name="message" cols="120" rows="10"></textarea>
</form>
</body>
</html>

Le code ci-dessus étant suffisamment simple à comprendre, nous n’apporterons aucune précision supplémentaire.

Relier la bibliothèque jQuery

Nous utiliserons la biliothèque jQuery pour réaliser notre compteur de caractères et de mots. Commencez par télécharger la dernière version de jQuery et reliez-le à votre document en ajoutant la ligne de code ci-dessous entre les balises <head> et </head> :

1
2
<!-- jQuery  -->
<script src="js/jquery-1.4.3.min.js"></script>

Relier la feuille de style – CSS

Bien qu’elle restera vide pour l’instant, nous allons relier notre feuille de style CSS à notre page web qui contient notre compteur. Ajouter la ligne de code ci-dessous entre les balises <head> et </head> :

1
2
<!-- Feuille de style -->
<link rel="stylesheet" href="styleCompteur.css" />

Espace d’affichage du compteur de mot et de caractère

Nous allons ajouter à notre formulaire un espace ou sera afficher le compteur de mot et de caractères, qui sera symbolisé par les balises <p> et </p>. Afin de pouvoir traiter et rafraîchir cet espace d’affichage, nous lui ajouterons un identifiant grâce à l’attribut id.

Voici à quoi ressemblera notre formulaire en HTML5 :

1
2
3
4
<form>
  <textarea id="message" name="message" cols="120" rows="10"></textarea>
  <p id="compteur">0 mots - 0 Caractere / 200</p>
</form>

Le script jQuery

Nous entrons dans la partie la plus importante de ce tutoriel : le script jQuery. Il devra indiquer le nombre de caractères et le nombre de mots entré par votre visiteur dans un champ textarea. Et, surtout, se mettre à jour après chaque frappe au clavier pour indiquer les nouvelles valeurs.

Le script jQuery se place entre les balises <body> et </body> de votre document HTML5.

Nous souhaitons que notre script affiche le nombre de caractères et de mots et soit rafraîchis après chaque entré ou frappe au clavier. Nous utiliserons donc l’attribut d’évènement pour les formulaire : keyup :

1
2
3
4
5
6
7
8
9
10
11
<script>
$(document).ready(function(e) {
 
  $('#message').keyup(function() {
 
   // Le script qui devra calculer et afficher le nombre de mots et de caractères
 
  })
 
});
</script>

Remarque : A la ligne 4, nous avons sélectionner le champ du formulaire de type textarea grâce à son id ayant pour valeur message. Vous pouvez jeter un coup d’oeil un peu plus haut sur la partie HTML5 si vous avez oublié son existence.

Calculer le nombre de caracteres

Nous allons maintenant calculer le nombre de caractères contenue dans le champ de type textarea :

1
var nombreCaractere = $(this).val().length;

La selection se fais par l’attribut this. Il indique, dans ce script, le MEME élément que pour la fonction, soit le champ de formulaire de type textarea possédant l’id ayant pour valeur message

Nous aurions également pu écrire :

1
var nombreCaractere = $("#message").val().length;

Calculer le nombre de mots

Pour calculer le nombre de mot que contient notre champ de type textarea, nous calculerons simplement le nombre d’espace entre chaque groupe de caractère. Pour éviter toute erreur, nous supprimerons les espaces du début et de fin pour ne pas les prendre en compte grâce à la fonction trim() :

1
2
3
4
 var nombreMots = jQuery.trim($(this).val()).split(' ').length;
    if($(this).val() === '') {
     	nombreMots = 0;
    }

Si le contenu ne contient ni espace, ni mot, nous initialiserons la variable nombreMots avec l valeur 0.

Afficher le nombre de caractères et le nombre de mots

Pour commencer nous allons créer et initialiser une variable contenant le texte à afficher. Ce texte sera le même que pour le paragraphe possédant l’id ayant pour valeur compteur.

La différence sera qu’au lieu d’afficher 0 pour le nombre de mot et le nombre de caractères, il devra afficher la valuer de leur variable respective : nombreMots et nombreCaractere

1
var msg = ' ' + nombreMots + ' mot(s) | ' + nombreCaractere + ' Caractere(s) / 200';

La deuxième étape consistera donc a remplacer le texte de ce paragraphe par le contenu de cette variable. Nous utiliserons la fonction jQuery text() afin de supprimer l’ancien texte par le nouveau.

1
$('#compteur').text(msg);

Appliquer une Class pour afficher le nombre en rouge lorsque la limite est dépassé

Pour notre exemple, nous avons fixé la limite à 200 Caracteres. Vous pouvez modifier cette valeur comme bon vous semble.

Nous utiliserons une condition pour tester la valeur du nombre de caractères. Si le nombre de caractères, ou cette valeur, est supérieur à 200, alors nous lui appliqueront une Class pour l’afficher en rouge.

1
if (nombreCaractere > 200) { $('#compteur').addClass("mauvais"); } else { $('#compteur').removeClass("mauvais"); }

La Class mauvais sera définis un peu plus loin dans notre tutoriel, dans la partie CSS.

Le script complet

Voici le script jquery complet. Je vous rappel qu’il faut le placer entre les balises <body> et </body> :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
$(document).ready(function(e) {
 
  $('#message').keyup(function() {
 
    var nombreCaractere = $(this).val().length;
 
    var nombreMots = jQuery.trim($(this).val()).split(' ').length;
    if($(this).val() === '') {
     	nombreMots = 0;
    }
 
    var msg = ' ' + nombreMots + ' mot(s) | ' + nombreCaractere + ' Caractere(s) / 200';
    $('#compteur').text(msg);
    if (nombreCaractere > 200) { $('#compteur').addClass("mauvais"); } else { $('#compteur').removeClass("mauvais"); }
 
  })
 
});
</script>

Le mise en page en CSS

La mise en forme de l’élément <form> a été arbitrairement choisis. Vous pouvez la modifier comme bon vous semble. Le paragraphe possédant l’attribut id ayant pour valeur compteur devra s’aligner à droite du champ de type textarea.

La Class mauvais est appliqué en jQuery au paragraphe avec l’attribut id ayant pour valeur compteur lorsque le nombre de caractères est trop grand.

La class mauvais met le texte en rouge pour indiquer l’erreur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
form {
  text-align:center;
  margin-top:80px;
  margin-left:auto;
  margin-right:auto;
  width:890px;
}
 
#compteur {
  text-align:right;
  width:855px;
  margin-left:auto;
  margin-right:auto;
  margin-top:5px;
  font:12px Verdana;
}
 
.mauvais {
  color:#cc0000;
}

Variante : Afficher le nombre de caractères restant

Voici le script jQuery a ajouter entre les balises <body> et </body>. Remplacer l’ancien script par celui-ci pour afficher le nombre de caractères restant (comme dans le deuxième exemple de la démo) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$('#message').keyup(function() {
 
    var nombreCaractere = $(this).val().length;
 
    // On soustrait le nombre limite au nombre de caractère existant
    var nombreCaractere = 200 - nombreCaractere;
 
    var nombreMots = jQuery.trim($(this).val()).split(' ').length;
    if($(this).val() === '') {
     	nombreMots = 0;
    }
 
    var msg = ' ' + nombreMots + ' mot(s) | ' + nombreCaractere + ' Caractere(s) restant';
    $('#compteur').text(msg);
 
    // On écris le nombre de caractère en rouge si celui si est inférieur à 0 
    // La limite est donc dépasse
    if (nombreCaractere < 0) { $('#compteur').addClass("mauvais"); } else { $('#compteur').removeClass("mauvais"); }
 
  })
 
});
</script>

Article du même thême : ..

  • John doe

    Exemple qui pourrait être utile mais dont la réalisation est absolument trop lourde par rapport à un javascript avec les fonctions de base.

    Un magnifique contre exemple de l’utilité de certaines bibliothèques ou framework à la mode. Un retour à la base du développement est des fois utile et intelligent !

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.