Lo script che presentiamo si rivela molto utile in quei casi in cui si desideri limitare il numero di caratteri da inserire in un'area di testo di un form. Oltre a ciò, per migliorare l'usabilità generale dello script, viene mostrato all'utente un contatore che tiene traccia dei caratteri rimanenti, un po' come avviene su certi cellulari quando si inviano messaggi SMS. Limitando i caratteri che è possibile inserire, infatti, sarebbe assurdo pretendere che chi compila un modulo tenga il conto da solo! Lo script è anche un esempio di uso di proprietà avanzate di Javascript e può essere riusato con estrema facilità.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
La sezione Javascript contiene le 3 funzioni principali necessarie per l'esecuzione dello script. Prima di tutto, però, viene crata una variabile, 'ns6', che valuta il supporto del DOM nel browser dell'utente:
var ns6=document.getElementById&&!document.all
La prima funzione, 'restrictinput', si occupa di gestire il limite dei caratteri, bloccando l'aggiunta di nuovi caratteri quando tale limite sia superato:
Lo script inizia con la definizione di un array che contiene il riferimento alle immagini/banner da far ruotare. Nell'esempio si presume che siano contenute all'interno della stessa directory in cui risiede la pagina:
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()
}
}
La seconda, 'countlimit', invece, tiene traccia del numero di caratteri inseriti dall'utente e di aggiornare di conseguenza il display posto in fondo al form:
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
}
}
L'ultima funzione, 'displaylimit', fa da collante all'intero script, richiamando le precedenti 2 e gestendo il testo da mostrare all'utente. L'attivazione avviene tramite gli eventi onkeypress e onkeyup, ovvero quando viene premuto un tasto e quando questo viene rilasciato (un fatto che può essere verificato facilmente eseguendo l'esempio l'allegato):
function displaylimit(thename, theid, thelimit){
var theform=theid!=""? document.getElementById(theid) : thename
var limit_text='<strong>Puoi inserire ancora <span id="'+theform.toString()+'">'+thelimit+'</span>
caratteri</strong>'
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);
}
}
Ciò che rende lo script straordinario, è che queste tre funzioni non vanno assolutamente toccate, se si esclude la parte relativa al testo del contatore da mostrare all'utente. Sarà nel richiamo interno al codice HTML che passeremo i parametri giusti. Se desiderate riusare lo script, quindi, questa parte può essere lasciata intatta, a prescindere dal form che utilizzerete e dal nome della textarea.
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
Vediamo subito la parte HTML. Nell'esempio abbiamo inserito un semplice form con una textarea:
form name="modulo">
textarea name="commenti" id="commenti" cols=25 rows=15>/textarea> />
<script type="text/javascript" language="javascript">
displaylimit("","commenti",50)
</script>
/form>
Due cose da osservare con attenzione. La textarea, oltre al nome assegnato con l'attributo 'namè, dovrà avere anche un id (nel nostro caso esso è 'commenti'.
Subito dopo la textarea, nel punto in cui desideriamo far apparire il testo del contatore, si dovrà inserire il richiamo allo script. Più precisamente, si tratterà di richiamare la funzione 'diplaylimit', passando 3 parametri:
- il primo può essere lasciato vuoto se si usa l'id (scelta consigliata)
- il secondo sarà l'id della textarea da limitare
- il terzo il numero massimo di caratteri
