| ||||||||||||||||
 StaffScripts Conta caratteri per TEXTAREA | |||||||||||||||||||||||||
| Autore: Riccardo | Data: 17/01/2002 | Downloads: 710 | Voto: 3,7/5 | Download | P r o v a | ||||||||||||||||||||
|
Chars left in una TEXTAREA
Lo script di questa scheda è forse uno dei più semplici fra quelli che vi ho presentato finora. L'ho già usato nel Guestbook, ma ho pensato di presentarlo comunque sotto forma di scheda ad uso di chi è più digiuno di JavaScript per introdurre l'uso di alcuni event-handler e metodi applicabili ai campi dei form.
Quel che ci proponiamo di fare è semplicemente limitare il numero di caratteri che il visitatore può inserire in un campo <TEXTAREA> di un form, ad esempio nel caso si debba inviare un messaggio SMS. Diamo subito un'occhiata al codice della pagina d'esempio, in cui ho evidenziato in rosso le sezioni che hanno a che fare con JavaScript: <HTML> <HEAD> <TITLE>http://www.jsdir.com - Chars left nella TEXTAREA</TITLE> <SCRIPT> <!-- var maxchars=50; function CheckLength() { with (document.modulo) { chars=testo.value if (chars.length > maxchars) { testo.value=chars.substr(0,maxchars); testo.blur(); } chr.value=maxchars-testo.value.length; } } //--> </SCRIPT> </HEAD> <BODY BGCOLOR="#ffffff"> <FORM NAME="modulo"> <TABLE BORDER="0" ALIGN="center"> <TR> <TD ALIGN="center"> <FONT FACE="verdana, arial, helvetica" SIZE="-1"> Scrivi nella textarea che segue.<BR> In quest'esempio sono consentiti solo 50 caratteri. <BR> </TD> </TR> <TR> <TD ALIGN="center"> <FONT FACE="verdana, arial, helvetica" SIZE="-1">Messaggio: <BR> <TEXTAREA NAME="testo" ROWS="5" COLS="30" WRAP="hard" onKeyUp="CheckLength()"></TEXTAREA> </FONT> </TD> </TR> <TR> <TD ALIGN="center"><FONT FACE="verdana, arial, helvetica" SIZE="-2">Chars left: <INPUT TYPE="text" NAME="chr" SIZE="4" onFocus="this.blur()"> </FONT> </TD> </TR> </TABLE> </FORM> </BODY> </HTML>L'elemento principale dello script è l'event-handler onKeyUp() inserito nel tag della <TEXTAREA>. L'evento che contolliamo è il momento in cui il tasto viene rilasciato, cioè l'istante in cui il dito lascia il tasto dopo averlo premuto. Al verificarsi di questo evento scatta la funzione CheckLength() che è anche l'unica dello script, il quale si compone, inoltre, solo di una variabile: maxchars che rappresenta ovviamente il numero massimo di caratteri che potranno essere inseriti. La funzione inizia con un'istruzione che abbiamo già incontrato più volte: width (oggetto) {istruzioni} che consente di stabilire l'oggetto su cui lavoreranno le istruzione contenute nelle parentesi graffe. In pratica ci consente di sottintendere la stringa "document.modulo" nelle istruzioni che seguono. Lo script per prima cosa assegna alla variabile chars il testo contenuto nella TEXTAREA, poi confronta la lunghezza della stringa ("chars.length") con il numero di caratteri consentiti, e se il limite è stato superato (ho usato ">" quindi la condizione sarà vera quando i caratteri saranno maxchars+1) il contenuto viene aggiornato estraendo una sottoscringa (substr()) di "maxchars" caratteri dalla stringa e scrivendone il contenuto nella TEXTAREA. Subito dopo viene tolto il focus dalla TEXTAREA per impedire l'inserimento di un altro carattere. Ovviamente anche se un altro carattere viene aggiunto la funzione scatterà, e l'inserimento di testo nel box sarà possibile solo a patto di cancellare qualcuno dei caratteri già inseriti con Del o BackSpace indifferentemente. L'ultima istruzione che esegue la funzione è aggiornare il campo testo chr che segue con il numero di caratteri rimanenti, dando così al nostro utente l'informazione di cui necessita. C'è solo un'altra istruzione JavaScript nella pagina, ed è l'event-handler onFocus() presente nel campo testo in cui visualizziamo i caratteri rimanenti. Non ha nessuna utilità pratica (il dato comunque non è importante), ma semplicemente impedisce la scrittura di alcunché all'interno del campo stesso, solo per rafforzare il limite che abbiamo imposto. | |||||||||||||||||||||||||
| |||||||||||||||||||||||||
| Per navigare correttamente il sito è necessario abilitare i cookies. |
| Enjoy Open Source! |
Stampa
Segnala 
Preferiti 
