Aujourd’hui nous allons voir comment faire un plugin jQuery, qui permet de compter le nombre de caractères pouvant encore être accepté dans des champs de texte.
Pour commencer, il faut décider du nombre de variables utiles à ce genre de réalisation. Une longueur maximale autorisée est un minimum. Ensuite, comme variables pouvant être utiles il y a:
- un seuil à partir duquel alerter l’utilisateur
- pouvoir définir des couleurs différentes selon l’état du champ (en-dessous du seuil, au-dessus du seuil, au-dessus du maximum)
Maintenant que nous avons défini les fonctionnalités de notre plugin, nous pouvons commencer à coder. Comme pour tout plugin jQuery, tout le code doit être compris dans une fonction:
(function($){ /* tout le reste du code se trouvera ici */ })(jQuery);
Viens ensuite la déclaration du plugin lui-même:
$.fn.charCount = function(options) { }
Ensuite, viens la déclaration des variables du plugin:
var settings = $.extend({
max: 250, // Nombre de caractères maximum
thr: 50, // Seuil d'alerte
normal: '#000000', // Couleur du texte quand tout va bien
alert: '#FFA500', // Couleur du texte quand le seuil est atteint
reached: '#FF0000' // Couleur du texte quand le maximum est atteint
}, options);
Le plugin devant être utilisable sur plusieur éléments d’une page, il faut pouvoir appliquer les effets du plugin sur chaque élément faisant appel à lui. Pour cela, on utilise la fonction suivante:
return this.each(function() { });
Avant toute chose, il faut ajouter à chaque élément une zone dans laquelle afficher le nombre de caractères restants. Pour cela, deux lignes de code suffisent:
var obj = $(this); // Permet de simplifier la syntaxe
obj.after('<div class="counter"><span style="color:'+settings.normal+';">'+settings.max+' caractères restants</span></div>');
Le compteur devant être actualisé à chaque entrée d’un nouveau caractère, on fait appel à la fonction:
obj.keyup(function(){ });
À présent, voyons le coeur du plugin:
var text = obj.val().length; // Récupère le nombre de caractères du champ
var remaining = settings.max - text; // Calcule le nombre de caractères restants
/*
Ensuite, trois cas se présentent:
- le nombre de caractères est en-dessous du seuil
- le nombre de caractères est au-dessus du seuil
- le nombre de caractères est au-dessus du max
Dans chaque cas, le contenu de la zone de compteur est actualisé avec le nombre de caractères restants, et la couleur associée
*/
if ( remaining > settings.thr && remaining > 0 ) {
obj.next('.counter').html('<span style="color:'+settings.normal+';">'+remaining+' caractères restants</span>');
} else if ( remaining <= settings.thr && remaining > 0 ) {
obj.next('.counter').html('<span style="color:'+settings.alert+';">'+remaining+' caractères restants</span>');
} else {
obj.next('.counter').html('<span style="color:'+settings.reached+';">Maximum atteint</span>');
}
Pour finir, voici l’ensemble du code du plugin:
(function($){
$.fn.charCount = function(options) {
var settings = $.extend({//set the default values for the controls
max: 250,
thr: 50,
normal: '#000000',
alert: '#FFA500',
reached: '#FF0000'
}, options);
return this.each(function() {
var obj = $(this);
obj.after('<div class="counter"><span style="color:'+settings.normal+';">'+settings.max+' caractères restants</span></div>');
obj.keyup(function(){
var text = obj.val().length;
var remaining = settings.max - text;
if ( remaining > settings.thr && remaining > 0 ) {
obj.next('.counter').html('<span style="color:'+settings.normal+';">'+remaining+' caractères restants</span>');
} else if ( remaining <= settings.thr && remaining > 0 ) {
obj.next('.counter').html('<span style="color:'+settings.alert+';">'+remaining+' caractères restants</span>');
} else {
obj.next('.counter').html('<span style="color:'+settings.reached+';">Maximum atteint</span>');
}
});
});
};
})(jQuery);
Pour voir le plugin en action, rendez-vous ici.
J’espère que cet article vous aura été utile, et je vous dis à bientôt pour d’autres découvertes !