Michele Basso
a- a+

Limitatore di caratteri in un campo di form, con indicatore di caratteri rimanenti

Con il DHTML di oggi possiamo limitare il numero di caratteri disponibili in un INPUT o in una TEXTAREA, visualizzando anche il numero di caratteri rimanenti disponibili. Lo script è compatibile con tutti i browser.

Per prima cosa, inseriamo questo codice all'interno del tag head:

<script>

/*
Form field Limiter script- By Dynamic Drive
For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
This credit MUST stay intact for use
*/

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.,/]/ //detect alphanumeric keys
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(theform,thelimit){
var limit_text='<strong><span id="'+theform.toString()+ '">'+thelimit+ '</span></strong> characters remaining on your input limit'
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>

Adesso inseriamo il form; utilizzate questo esempio di form:

<form name="sampleform">

<input type="text" name="george" size=20><br>
<script>
displaylimit("document.sampleform.george" ,5)
</script>
<p>
<textarea name="john" cols=25 rows=15>

Mentre, per visualizzare il numero dei caratteri rimanenti, utilizziamo questo codice:

<input type="text" name="george"><br>
<script>
displaylimit('document.sampleform.george',8)
</script>

Per problemi nell'utilizzo dello script, potete consultare il nostro forum di discussione.

 

 

 



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Pier Paolo
Condividi le tue opinioni su questo articolo!