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 caratteridisponibili in un INPUT o in una TEXTAREA, visualizzandoanche il numero di caratteri rimanenti disponibili. Lo scriptè compatibile con tutti i browser.

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

<script>/*Form field Limiter script- By Dynamic DriveFor full source code and more DHTML scripts, visit http://www.dynamicdrive.comThis credit MUST stay intact for use*/var ns6=document.getElementById&&!document.allfunction restrictinput(maxlength,e,placeholder){if (window.event&&event.srcElement.value.length>=maxlength)return falseelse if (e.target&&e.target==eval(placeholder)&&e.target.value.length>=maxlength){var pressedkey=/[a-zA-Z0-9.,/]/ //detect alphanumeric keysif (pressedkey.test(String.fromCharCode(e.which)))e.stopPropagation()}}function countlimit(maxlength,e,placeholder){var theform=eval(placeholder)var lengthleft=maxlength-theform.value.lengthvar 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, poteteconsultare il nostro forum didiscussione.

 

 

 



Ti potrebbe interessare anche

commenta la notizia