Plugin jQuery : maxlength, nombre de caractères restants

J’ai récemment eu le cas suivant : une interface d’envoi de SMS.

Devant limiter le nombre de caractères à 160, je me suis mis à coder ce petit plugin jQuery affichant à l’utilisateur combien il lui reste de caractères à saisir avant d’atteindre ce seuil maximum (et accessoirement de combien il le dépasse si c’est le cas).

Plutôt que de commencer par vous mettre le code source, voici quelques explications sur ce plugin :

Les différents paramètres intégrés sont :

• maxlength un entier, permettant de définir le nombre de caractères maximum
• autoload un booleén spécifiant si l’on veut afficher le nombre de caractère restant au chargement ou s’il on attend la prochaine saisie
• mess_eq Le message par défaut si le nombre de caractère saisie équivaut au nombre maximum (ie maxlength)
• mess_inf Le message par défaut si le nombre de caractère saisie est inférieur au nombre maximum
• mess_sup Le message par défaut si le nombre de caractère saisie est supérieur au nombre maximum

Le script peut donc se lancer au chargement mais le calcul se fait lorsqu’un caractère est saisie dans le (ou les) champ(s) concerné(s) (ie la foction keyup()).

Rien de bien compliqué, on calcule notre différence entre notre nombre maximum et le nombre de caractère et on affiche un message en conséquence (dans un bloc crée après l’élément de saisie).

Voici donc le code source javascript de ce plugin :

[javascript]
/**
* maxlength jQuery plugin
*
* @author Fabrice Planchette <http://www.fabriceplanchette.fr>
* @version 1.0
* @requires jQuery
* @see http://www.devzone.fr/plugin-jquery-maxlength
* @param int maxlength Nombre de caractères max
* @param boolean autoload Calcul au chargement ?
* @param string mess_eq Message si equivalent
* @param string mess_inf Message si inférieur
* @param string mess_sup Message si supérieur
* @description Calcul et affiche le restant/surplus de la saisie dans un input/textarea
*/
(function($){
$.fn.maxlength = function(options) {
// Les variables par défaut
var defaults = {
maxlength: 25,
autoload: true,
mess_eq: "Nombre de caractères maximum atteint.",
mess_inf: "Caractères restants : ",
mess_sup: "Caractères en trop : "
}
var options = $.extend(defaults, options);

return this.each(function()
{
var $$ = $(this);

if( options.autoload==true ) {
info( parseInt( $$.val().length ) );
}

$$.keyup(function() {
info( parseInt( $$.val().length ) );
});

/**
* Quelle info va-t-on afficher ?
*
* @name info
* @param int length
*/
function info(length)
{
// on retire un éventuel précédent message
$("#maxlength-" + $$.attr("id")).remove();

// Equivalent, inférieur ou supérieur
if( length == options.maxlength )
{ msg = options.mess_eq; }
else if( length < parseInt( options.maxlength ) )
{ msg = options.mess_inf + ( parseInt( options.maxlength ) – length ); }
else
{ msg = options.mess_sup + ( length – parseInt( options.maxlength ) ); }

// Affichage
$$.after( "<span class=\"maxlength\" id=\"maxlength-" + $$.attr("id") + "\">" + msg + "</span>" );
}
});
};
})(jQuery);
[/javascript]

Pour l’appliquer, voici un exemple :

[html]
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.maxlength.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("textarea#message1, textarea#message2").maxlength();
});
</script>

<form action="" method="post">

<p>
<label for="message1">Message :</label><br />
<textarea cols="20" id="message1" name="message1" rows="5"></textarea>
</p>

<p>
<label for="message2">Message :</label><br />
<textarea cols="20" id="message2" name="message2" rows="5"></textarea>
</p>

</form>
[/html]

Je suis bien sur ouvert à toutes remarques et améliorations sur ce plugin