Ajouter un compteur de mot à un champ de formulaire

Compte utilisateur

Publié le : 27 janvier 20162 mins de lecture

Il peut parfois être intéressant si vous etes administrateur d’un annuaire ou d’un site de communiqué de presses de proposer à vos internautes une option permettant d’afficher automatiquement le nombre de mots ou le nombre de lettres de leurs descriptions .

Et ceci est très simple avec un simple code de JavaScript !

Ajouter entre les balises head :

<script type= »text/javascript »>
var ns6=document.getElementById&&!document.all

function restrictinput(maxlength,e,placeholder){
if (window.event&&event.srcElement.value.length>=maxlength)
return false
else if (e.target&&e.target==eval(placeholder)&&e.target.value.length>=maxlength){
var pressedkey=/[a-zA-Z0-9.,/]/
if (pressedkey.test(String.fromCharCode(e.which)))
e.stopPropagation()
}
}

function countlimit(maxlength,e,placeholder){
var theform=eval(placeholder)
var lengthleft=maxlength-theform.value.length
var placeholderobj=document.all? document.all[placeholder] : document.getElementById(placeholder)
if (window.event||e.target&&e.target==eval(placeholder)){
if (lengthleft<0)
theform.value=theform.value.substring(0,maxlength)
placeholderobj.innerHTML=lengthleft
}
}

function displaylimit(thename, theid, thelimit){
var theform=theid!= » »? document.getElementById(theid) : thename
var limit_text=’<b><span id= »‘+theform.toString()+’ »>’+thelimit+’</span></b> characteres Maximum.’
if (document.all||ns6)
document.write(limit_text)
if (document.all){
eval(theform).onkeypress=function(){ return restrictinput(thelimit,event,theform)}
eval(theform).onkeyup=function(){ countlimit(thelimit,event,theform)}
}
else if (ns6){
document.body.addEventListener(‘keypress’, function(event) { restrictinput(thelimit,event,theform) }, true);
document.body.addEventListener(‘keyup’, function(event) { countlimit(thelimit,event,theform) }, true);
}
}

</script>

Puis après la balise body dans votre formulaire :

<form>
<textarea name= »description » id= »lechamp » cols=10 rows=10 class= »annuaire »></textarea>
<br>
</form>
<script>
displaylimit(«  », »lechamp »,200)
</script>

Plan du site