TextLimit, le compteur JQuery qui a du caractère

Un plugin JQuery (très) léger permettant de mettre en place un contrôle de nombre de caractères sur un champ texte. Ses fonctionnalités sont simples et sa prise en main aisée. Mode d’emploi.

Le plugin est tellement léger qu’il tient en quelques lignes :

;(function($){$.fn.clearTextLimit=function(){return this.each(function(){this.onkeydown=this.onkeyup=null;});};$.fn.textLimit=function(limit,callback){if(typeof callback!=='function')var callback=function(){};return this.each(function(){this.limit=limit;this.callback=callback;this.onkeydown=this.onkeyup=function(){this.value=this.value.substr(0,this.limit);this.reached=this.limit-this.value.length;this.reached=(this.reached==0)?true:false;return this.callback(this.value.length,this.limit,this.reached);}});};})(jQuery);

On note le « OnKeyDown » dans le code, pour plus tard… Une fois ce plugin mis en place, il suffit d’insérer dans sa page un textarea ou un champ texte, ainsi qu’un span/p/div qui l’accompagne. L’essentiel étant que chacun aie son ID. Nous avons choisi ici un textarea et un span :

<textarea id="montextarea"></textarea>
<br />
<span id="desc">Tapez votre texte</span>

On peut également rajouter un peu de style :

#montextarea{
	width: 300px;
	height: 100px;
	border: 3px solid #fff;
	padding: 3px 0 3px 0;
	background: #dfdfdf;
	text-shadow: 1px 1px 1px #fff;
	border-radius : 5px;
	-moz-border-radius : 5px;
	-webkit-border-radius : 5px;
	box-shadow : 0px 0px 2px #777;
	-moz-box-shadow : 0px 0px 2px #777;
	-webkit-box-shadow : 0px 0px 2px #777;
}
#montextarea:hover, #montextarea:focus{
	background: #eee;
}
#desc{
	display: block;
	width: 300px;
	text-align: right;
}

Ceci n’est pas indispensable, mais tellement plus sympa 🙂 Pour l’instant, cela ne donne pas grand chose et c’est normal : Il faut mettre en place dans du javascript les contrôles et les comportements à adopter selon trois cas :

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

Maintenant la question qui se pose, c’est comment définir la limite et les contrôle? Tout simplement à l’aide de l’association listener/fonction suivante :

$("#montextarea").textLimit(50,function( length, limit, reached  ){
   //Contenu de ma fonction
});

Ce listener est en fait le listener de l’action « OnKeyDown » vue dans le code du plugin. Il appelle la fonction associée en lui passant des paramètres, et ceci à chaque fois qu’une touche sera pressée dans l’élément auquel on l’a affecté. On remarque quatre choses :

  • le chiffre 50 : la limite de caractères. Peut être remplacé par une variable si besoin
  • length : la longueur du texte en cours, passée en paramètre à la fonction appelée
  • limit : la limite définie dans les paramètre de l’appel à TextLimit()
  • reached : un booléen qui définit si on est arrivé au bout ou non

On peut imaginer beaucoup de tests ou réactions différentes, selon que l’on veut juste afficher le nombre de caractères saisis :

$("#desc").text(length);

Ou encore le nombre de caractères restant :

$("#desc").text(limit-length);

Ici nous avons choisi d’afficher des phrases plus complètes selon les cas :

$("#montextarea").textLimit(50,function( length, limit, reached  ){
	//On stocke dans une variable le nombre de caractères courant
	var nb = limit - length;
	if ( length == 0 )
	//Si on a effacé tout le texte du textarea
		$("#desc").text("Tapez votre texte");
	if ( reached )
	//Si on estarrivé au bout
		$("#desc").text("Vous avez utilisé vos "+length+" caractères.");
	if ( !reached && length > 0 )
	//Si on n'est pas au bout mais qu'il y a des caractères de tapés
		$("#desc").text("Il reste "+nb+" caractères");
});

Voilà ce que cela peut donner :



>>> Site officiel

11 commentaires

  1. Génial ce petit script !
    Par contre serait il possible d’avoir une variable permettant de désactiver optionnelement l’effacement des caractères en trop ? C-a-d que ce soit simplement informatif ?
    Merci

  2. Également constaté sur Firefox11, le textarea perd le focus et scroll en haut.
    Le problème vient de la méthode substr ligne 25 :

    this.value = this.value.substr(0,this.limit);

    Pour éviter le problème, une petite condition :

    if(this.value.length > this.limit){
    this.value = this.value.substr(0,this.limit);
    }

  3. Bonjour à vous deux,

    J’ai regardé, pas moyen de reproduire ce que vous constatez… Vous utilisez d’autres js sur les pages qui embarque textlimit?

    Sur ce billet par exemple, le curseur repart à la fin aussi?

  4. Rebonjour,

    Je viens de remarquer un petit problème. J’utilise ce plugin en temps réel, c’est à dire après chaque pression de touche. Sauf que, lorsqu’on revient modifier un élément dans le champ, le pointeur retourne à la fin du champs après chaque pression de touche.

    De même, la sélection s’annule immédiatement avec cmd+A (ctrl+A sous Windows) et le pointeur retourne à la fin du champ.

    En espérant avoir aidé.

    1. Bonjour, j’ai le même probleme que toi sur le fait que le curseur ce positionne a la fin du text. A tu trouvé une solution (bug sur chrome+safari).

      Merci

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *