Plugin jQuery : TextLimit compteur de caractères

Des fonctionnalités simples, une prise en main facile, telles sont les caractéristiques de TextLimit, un plugin jQuery très léger.
Sa principale utilité est le contrôle de nombre de caractères sur un champ input text.

Ce plugin est très léger et il n’occupe que quelques lignes :

Une fois que le plugin est installé, il suffira plus que d’insérer un champ text ou textarea enveloppé d’un span. Une chose essentielle, il faut que chacun ait son propre ID.

Voici un exemple avec un textarea et un span :

Il faudra aussi rajouter le style comme ci-dessous :

Bien que rajouter le CSS ne soit pas vraiment obligatoire, cela donner un aspect plus sympathique.
Seulement, tous cela ne suffira pas puisqu’il faut gérer les comportements via JavaScript.
Trois conditions doivent être traiter :

  • Aucun caractère de saisi
  • Le texte est en cours de remplissage
  • Le nombre limite est atteint

En pratique, c’est très simple car il suffit d’utiliser la fonction listener comme suit :

Parlons maintenant du listener « OnKeyDown » , il appelle la fonction associée en lui donnant des paramètres à chaque fois qu’une touche est pressée sur l’élément affecté. Quatre points sont remarquées :

  • Le chiffre 50 : qui est la limite de caractères et pouvant être remplacé par une variable au besoin
  • Length : qui est la longueur du texte en cours
  • Limit : qui est la limite définie dans les paramètres de l’appel à TextLimit()
  • Reached : qui est un booléen définissant à un aboutissement ou non

Il est possible d’imaginer de nombreuses réactions et de tests différents:

Pour tester le nombre de caractère qui reste à saisir il suffit le code :

Pour aller plus loin, on peut gérer l’affichage des informations selon le cas :

Voici un vidéo de démonstration

Répondre