Torniamo a parlare di form HTML e loro utilizzo ai fini della creazione di moduli informativi, per esporre uno script curioso ma utile per scopi specifici. Il campo Textarea è utilizzato per commenti o campi che prevedano l'inserimento di molto testo. La larghezza è impostata da "cols" e l'altezza da "rows". WRAP="physical" stabilisce che qualora il testo inserito superi la larghezza della finestra, venga automaticamente riportato a capo. Il campo Textarea viene quindi usato per consentire al visitatore di esprimere giudizi o dilungarsi con commenti che eccedano il testo consentito in altri campi. Per esigenze particolari puo' essere necessario limitare il numero di caratteri rispetto ad una quantità massima, oltre la quale il testo viene tagliato.
Lo script che presentiamo crea un conto alla rovescia dei caratteri usabili all'interno di un campo Textarea, oltre il quale il visitatore non puo' scrivere. Di questo l'utente è coscapevole perchè un contatore indica il numero di caratteri ancora disponibili in tempo reale. È un effetto molto usato negli ormai numerosi servizi SMS, che giocoforza devono limitare il numero di caratteri per i brevi messaggi di testo.
L'esempio si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento al file sopracitato, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Si tratta dell'unico file di questo script che simula un campo Textarea di un form.
Il codice va inserito in parte tra i campi <head> del documento e in parte tra i tag <body>. All'interno di <head> va inserito il seguente codice:
<script type="text/javascript" language="javascript">
<!--
var supportsKeys = false
function favChange(rnum) {
f = document.newMsg;
if (f.favs.selectedIndex>=0) {
f.msgTo.value = f.favs.options[f.favs.selectedIndex].value
}
if (f.favs.selectedIndex> 0 && f.favs.selectedIndex <= rnum + 1) {
f.msgText.focus();
} else {
f.msgTo.focus();
}
}
function calcCharLeft(f) {
lenUSig = f.lenSSig.value
maxLength = 200 - f.lenSysSig.value - lenUSig
if (f.msgText.value.length> maxLength) {
f.msgText.value = f.msgText.value.substring(0,maxLength)
charleft = 0
} else {
charleft = maxLength - f.msgText.value.length
}
f.msgCL.value = charleft
}
function textKey(f) {
supportsKeys = true
calcCharLeft(f)
}
//-->
</script>
perchè lo script funzioni correttamente il codice sopracitato non va modificato in nessun punto, se non nel numero massimo di caratteri consentito. Nell'esempio il numero massimo di caratteri è stabilito in 200 ed è impostato dalla riga di codice:
maxLength = 200 - f.lenSysSig.value - lenUSig
Sostituendo al valore 200 un altro numero, la quantità di caratteri permessi diminuirà o aumenterà in modo corrispondente.
All'interno del documento va inserito il seguente codice:
<form action="http://www.server.com/mail.pl" method="post" name="newMsg">
<textarea name="msgText" rows="4" cols="40" wrap="soft"
onKeyUp="textKey(this.form)"></textarea>
<br><input value="200" size="3" name="msgCL" disabled>
<input TYPE="HIDDEN" name="lenSSig" value="0">
<input TYPE="HIDDEN" name="lenLSig" value="0">
<input TYPE="HIDDEN" name="lenSysSig" value="0">
</form>
Al tag form va aggiunto name="newMsg", che richiama la funzione impostata in precedenza. Al campo Textarea va aggiunto name="msgText" oltre al gestore onKeyUp="textKey(this.form). Al valore input va dato il nome di name="msgCL" impostato su disabled. Il valore preimpostato value va impostato su un numero di caratteri identico a quello previsto nello script iniziale. In questo caso il numero di caratteri possibili è 200, se nello script tra i campi <head> la quantità fosse diversa, lo dovrebbe essere anche value.
