Compteur de caractères facile avec Prototype

Dans plusieurs formulaires web, on voit fréquemment une recommandation sur le nombre de caractères à entrer. Dans le cas de Twitter, une limite de 140 caractères est allouée pour inscrire son statut et au fur et à mesure que l'on entre des lettres, le compteur fait un compte à rebour (countdown) pour indiquer le nombre de caractères restants.

On peut facilement reproduire ce comportement en JavaScript (de nombreux scripts sont déjà disponibles un peu partout sur le web) et prototype.js permet de créer un code encore plus clair, en quelques lignes de code seulement.

D'abord, on doit inclure la librarie prototype dans la balise HEAD de la page HTML. Ensuite, on initialise le compteur dès qu'on détecte que le Document Object Model est prêt.

La fonction anonyme qui suit permet d'attacher la fonction countdown() à l'événement "keyup", donc à chaque fois qu'une touche du clavier est enfoncée à l'intérieur du champ de saisie portant l'ID "txt". La fonction countdown() ne fait que faire une soustraction entre le champ maximum autorisé (définit dans un champ hidden du formulaire) et le nombre de caractères entrés jusqu'à maintenant.

<script language="javascript" src="prototype-1.6.0.3-min.js"></script>
<script language="javascript" language="javascript">
document.observe('dom:loaded', function(){
   Event.observe('txt', 'keyup', countdown);

   // premier appel pour initialiser le compteur
   countdown();
});

function countdown(){
   $('compteur').update( $F('txt_maxlength') - $F('txt').length );
}
</script>

Exemple de formulaire :

<form>
   <div>
       <input type="text" id="txt" />
   </div>
   <div>
       <input type="hidden" id="txt_maxlength" value="140" />
       <span id="compteur"></span> caractères
   </div>
</form>

À noter qu'avec un champ de type "textarea", chaque saut de ligne est compté comme étant un caractère.