Lo script che presentiamo sarà sicuramente utile nei casi in cui si voglia limitare il numero di caratteri inseribili negli elementi dei form.
Il codice è applicabile non solo alle textarea ma anche agli input text. I caratteri rimanenti saranno visualizzati a video in tempo reale. Infine sarà possibile applicare lo script a più elementi nello stesso modulo.
La compatibilità è garantita con Explorer 5.x e Netscape 6.x mentre non funzionerà con Navigator 4.x.
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo il codice tra i tag <head> della pagina:
<script type="text/javascript" language="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(theform,thelimit){
var limit_text='<strong><span
id="'+theform.toString()+'">'+thelimit+'</span></strong> caratteri rimanenti'
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>
Questo codice non ha bisogno di alcuna modifica e può essere lasciato così.
A questo punto costruiamo un normale modulo in html:
<form name="esempio">
<input type="text" name="primo" size=20><br />
<textarea name="secondo" cols=35 rows=8></textarea><br />
</form>
Per aggiungere il controllo sui caratteri ad uno qualsiasi degli elementi basterà inserire una stringa di questo tipo:
<script type="text/javascript" language="javascript">displaylimit("document.NOME_FORM.NOME_CAMPO",VALORE_NUMERALE)</script>
Il codice appena visto dovrà essere inserito subito dopo il campo a cui fa riferimento e dovrà essere personalizzato nelle variabili:
NOME_FORM = sostituire con il nome che avete dato al form
NOME_CAMPO = sostituire con il nome del campo su cui bisogna effettuare il conteggio dei caratteri
VALORE_NUMERALE = inserire un valore che indicherà il numero massimo di caratteri inseribili
Tornando al nostro esempio, quindi, avremo un modulo così strutturato:
<form name="esempio">
<input type="text" name="primo" size=20><br />
<script type="text/javascript" language="javascript">displaylimit("document.esempio.primo",10)</script>
<textarea name="secondo" cols=35 rows=8></textarea><br />
<script type="text/javascript" language="javascript">displaylimit("document.esempio.secondo",30)</script>
</form>
Nel primo caso l'input text si chiama "primo" e prevede un massimo di 10 caratteri.
Nel secondo caso abbiamo una textarea chiamata "secondo" che prevede un massimo di 30 caratteri inseribili.
Altre modifiche non sono necessarie.
