Maxime Millet

Javascript compteur de caractères textarea (minimum et maximum)

10/05/2012 | Commentaires fermés |

Il est souvent utile de limiter une textarea en lui indiquant un nombre maximum de caractères à ne pas dépasser soit par une fonction javascript, soit grâce à maxlength="nombre" pour une description par exemple. Cependant, il est aussi utile de donner un minimum de caractères car si votre description fait 20 caractères, je doute qu'elle soit très précise mais je ne voudrais pas douter de vous... ;)

C'est ce que fait le script ci-dessous, il donne un minimum de caractères ainsi qu'un maximum pour que le formulaire soit validé.

var total=0;
var mini=150;
var maxi=600;
function actionlimite(){
if(total < mini || total > maxi)
{
alert("Votre description utilise "+total+" caractères alors qu'elle doit en faire entre "+mini+" et "+maxi+" caractères !");
return false;
}
else{
return true;
}
}
function limite(textarea){
total = textarea.value.length;
}

Ici les limites du nombre de caractères est > 150 et < 600, elles sont définies par les variables mini et maxi.

<form name="description" onSubmit="return actionlimite();">
<textarea name="description" onKeyUp="limite(this);" ></textarea>
<input name="valider" type="submit" value="Envoyer">
</form>

Nous allons d'abords nous intéresser à la ligne 2. Comme vous pouvez le comprendre l'attribut onKeyUp va appeler la fonction limite() à chaque fois qu'une touche est relachée et donc mettre à jour la variable total. Cette fonction prend en paramètre this qui est le pointeur sur la ressource donc ici notre textarea.

Dans la ligne 1, l'attribut onSubmit va lancer la fonction actionlimite() avant de valider le formulaire. Si la fonction retourne true alors c'est que le nombre de caractères est suffisant, le formulaire est dans ce cas envoyé, sinon, elle retourne false et le formulaire n'est pas envoyé.

Bonus : un compteur

Comme je vous ai déjà donné le début de mon code je vais aussi vous donner le compteur :D.

Pour cela il vous suffit de rajouter la ligne ci-dessous dans la fonction limite() :

document.getElementById('compteur').innerHTML = total+" Caractère(s)";

Et n'oubliez pas de d'ajouter <span id="compteur"></span> dans votre page ;).

Démonstration du code

Commentaires





Remarque : Votre commentaire sera visible après validation par le webmaster.