Javascript - Décompter et limiter le nombre de caractère d'un champ

Décompter et limiter le nombre de caractère d'un champ

Décompter et limiter le nombre de caractère d'un champ

Par Mathieusub, publié le 16/03/2010 à 14:25:54

Dans ce tutoriel nous allons apprendre comment mettre en place un limiteur et décompteur du nombre de caractère dans un champ.

Etape 1 : Ajoutez ce code entre les balises <head></head> de votre page :

<script type="text/javascript" src="formlimiterdecompter.js"></script>

Cliquez sur le lien ci-dessous pour télécharger le fichier :
http://webdezign.tutoriaux.free.fr/sources/formlimiterdecompter.js

Etape 2 : Maintenant nous allons mettre en place un formulaire avec un champ du sera limitée à 10 caratères. Code à placer entre les balises <body></body> de votre page :

<!--Ouverture de mon formulaire nommé Exempledeformulaire-->

<form name="Exempledeformulaire">

<!--Création d'un champ nommé webdezigntutoriaux-->

<input type="text" name="webdezigntutoriaux" style="width:250px" />

<!--Affichage des données-->

<div id="webdezigntutoriaux-status"></div>

<!--Fermeture de mon formulaire-->

</form>



<script type="text/javascript">

fieldlimiter.setup({

//Récupération des données du champ

thefield: document.Exempledeformulaire.webdezigntutoriaux,

//On limite le champ à 10 caratères

maxlength: 10,

//id pour le retour des informations

statusids: ["george-status"], 

//Lorsque l'on appuie sur une touche 

//on vérifie si le texte n'est pas trop long

onkeypress:function(maxlength, curlength){

if (curlength<maxlength) 

//Bordure du champ en gris si le nombre n'est pas dépasser

this.style.border="2px solid gray" 

else

//Bordure du champ en rouge si le nombre est dépasser

this.style.border="2px solid red"

}

})

</script>