Una variazione sul tema, come detto nell'introduzione, suggerita da un amico che aveva bisogno di controllare tre diversi TEXTAREA da cui far partire degli SMS.
Pur essendo molto simile al vecchio, vediamo come utilizzare il codice:
<HTML>
<HEAD>
<TITLE>http://www.jsdir.com - Chars left in più TEXTAREA</TITLE>
<SCRIPT>
<!--
function CheckLength(txta,chrs,maxchars)
{
with (document.modulo)
{
var chars=txta.value
if (chars.length > maxchars)
{
txta.value=chars.substr(0,maxchars);
txta.blur();
}
chrs.value=maxchars-txta.value.length;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff">
<FORM NAME="modulo">
<TABLE BORDER="0" ALIGN="center">
<TR>
<TD ALIGN="center" COLSPAN="2">
<FONT FACE="verdana, arial, helvetica" SIZE="-1">
Scrivi nella textarea che segue.<BR>
In quest'esempio sono consentiti solo 10 caratteri nel primo box e 25 nel secondo. <BR>
</TD>
</TR>
<TR>
<TD ALIGN="center">
<FONT FACE="verdana, arial, helvetica" SIZE="-1">Messaggio 1: <BR>
<TEXTAREA NAME="testo1" ROWS="5" COLS="30" WRAP="hard" onKeyUp="CheckLength(testo1,chr1,10)"></TEXTAREA>
</FONT>
</TD>
<TD ALIGN="center">
<FONT FACE="verdana, arial, helvetica" SIZE="-2">
Chars left: <br><INPUT TYPE="text" NAME="chr1" SIZE="4" onFocus="this.blur()">
</FONT>
</TD>
</TR>
<TR>
<TD ALIGN="center">
<FONT FACE="verdana, arial, helvetica" SIZE="-1">Messaggio 2: <BR>
<TEXTAREA NAME="testo2" ROWS="5" COLS="30" WRAP="hard" onKeyUp="CheckLength(testo2,chr2,25)"></TEXTAREA>
</FONT>
</TD>
<TD ALIGN="center">
<FONT FACE="verdana, arial, helvetica" SIZE="-2">
Chars left: <br><INPUT TYPE="text" NAME="chr2" SIZE="4" onFocus="this.blur()">
</FONT>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
La funzione
CheckLength() ora accetta in intresso tre parametri: il primo ("txta") fa riferimento alla textarea da controllare, e corrisponde al valore del
NAME del campo. Idem per il secondo parametro ("chrs") che invece punta al campo TEXT in cui visualizziamo il numero di caratteri rimanenti.
L'ultimo parametro ("maxchars") è invece il numero massimo di caratteri consentiti, passato come parametro alla funzione ci consente di avere un numero massimo di caratteri diverso per ogni TEXTAREA.
La funzione viene invocata ogni volta che rilasciamo un tasto (cioè scriviamo un carattere) nella TEXTAREA, grazie all'event-handler
onKeyUp che passa alla funzione il valore dei tre parametri necessari.
Come nella
precedente versione, la funzione confronta il numero attuale di caratteri ed elimina l'ultimo appena inserito al superamento del limite imposto.
Notare che la prima riga della funzione fa rifermiento
all'unico form presente nello script di prova ("<FORM NAME="modulo">"), se i TEXTAREA fossero presenti in più di un modulo converrà modificare la funzione come segue:
function CheckLength(txta,chrs,maxchars)
{
if (chars.length > maxchars)
{
txta.value=chars.substr(0,maxchars);
md[txta].blur();
}
md[chrs].value=maxchars-md[txta].value.length;
}
e l'event-handler
onKeyUp assumerà questa sintassi:
onKeyUp="CheckLength(document.modulo1.testo1,document.modulo1.chr1,10)"
Cioè alla funzione ora passeremo direttamente l'oggetto TEXTAREA e l'oggetto TEXT su cui lavorerà la funzione (avendo diversi moduli è sparita l'istruzione
with (document.modulo)), ed i rifermimenti agli oggetti ("txta" e "chrs") verranno usati direttamente per il controllo dei caratteri.
Nel file ZIP da scaricare è presente un secondo file d'esempio ("index_multiform.html") che dimostra il funzionamento di questa variante.