Elucubrato da saibal
Addì 30 settembre 2002
I Form: risposte a domande frequenti
È possibile limitare i caratteri inseribili di una textarea?
Ovviamente sì… e sempre grazie a javascript. Ecco come sarà strutturata la pagina:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Limita Textarea</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function textCounter(field, countfield, maxlimit) { if (field.value.length > maxlimit) field.value = field.value.substring(0, maxlimit); else countfield.value = maxlimit - field.value.length; } // End --> </script> </head> <body> <form name="saibal" action="...." method="post"> <input name="prova" type="text" size="25"> <textarea name="tarea" rows="5" cols="20" onKeyDown="textCounter(document.saibal.tarea,document.saibal.mostra,100);" onKeyUp="textCounter(document.saibal.tarea,document.saibal.mostra,100);"></textarea> <input readonly type="text" name="mostra" size="3" value="100"> Max Caratteri <input type="submit" name="submit" value="Clicca & Godi"> </form> </body> </html>
Il javascript tra i tag <head> non va toccato; ciò che dobbiamo personalizzare sono le due stringhe da inserire nel tag textarea:
1
onKeyDown="textCounter(document.saibal.tarea,document.saibal.mostra,100);"
1
onKeyUp="textCounter(document.saibal.tarea,document.saibal.mostra,100);"
I valori in neretto sono quelli da personalizzare:
- saibal è il nome del form
- tarea è il nome della textarea
- mostra è il nome del piccolo box che contiene i caratteri rimanenti
- 100 è il numero dei caratteri da conteggiare. Il valore deve essere uguale in tutte e due le stringhe
È possibile rendere un campo non modificabile anche con Netscape 4.x?
Come sapete l'attributo "readonly" è valido solo per Explorer e, a partire dalla versione 6, anche per per Netscape. Ma ovviamente Navigator 4.x non è così generoso con noi quindi, ancora una volta, bisogno ricorrere a javascript.
Personalmente conosco due soluzioni: a voi la scelta di quella che vi piace di più.
La prima, proposta da Massimo61 sul nostro forum, è decisamente veloce e utilizza l'istruzione onFocus="this.blur()" in questa maniera:
1 2 3 4
<form name="saibal" action="...." method="post"> <input name="prova" type="text" size="25" onFocus="this.blur()"> <input type="submit" name="submit" value="Clicca & Godi"> </form>
La seconda è più lunga ma ugualmente funzionale:
1 2 3 4
<form name="saibal" action="...." method="post"> <input type="text" name="prova" value="non modificabile" onFocus="(this.disabled); { this.value = saveValue; setTimeout('document.saibal.prova.blur()',1); } "> <input type="submit" name="submit" value="Clicca & Godi"> </form>
E, dopo il tag di chiusura del form, inseriamo questo breve codice:
1 2 3 4 5 6
<script language="JavaScript"> <!-- document.nomeform.text.disabled = true; saveValue="non modificabile"; //--> </script>
Anche in questo caso ricordo di personalizzare le stringhe document.saibal.prova con il nome del proprio modulo e del proprio campo.
Non ho di certo esaurito l'argomento ma spero di aver dato dei buoni spunti per dimostrare che i moduli, alla fine, non sono così difficili da gestire come si crede.
Con qualche nozione in più di css, javascript e html possiamo rendere un modulo perfettamente visibile anche con Netscape 4.x e vi assicuro che, se siete riusciti a superare lo stress creato da quello che alcune persone chiamano browser, siete pronti per affrontare qualsiasi cosa.
- 4.424 visite
Vota: 90%
Loading ...
Elucubrazioni
Trash e dintorni
Pere di fosforo
My Ubuntu
Guide e Articoli
Editoriali
Motociclettando
Php for Geek
Tesi di Laurea
Ciao! Complimenti per l'articolo!
Avrei una domanda da fare:
<input type="text" target="nascosto" name="sender_email" size="16"><br><br>
Messaggio:<br><textarea name="msg" rows="8" cols="35"></textarea><br><br>
In questa stringa:
<input type="submit" name="submit" target="nascosto" value="INVIA">
ho provato ad inserire uno dei seguenti comandi:
onClick="this.form.msg.value=''"
onSubmit="this.form.msg.value=''"
per resettare il form dopo l'invio… ma così facendo mi da errore!
Come posso resettare automaticamente il campo testo dopo l'invio?
Grazie mille!
Davide
che intendi per "resettare il form" dopo l'invio?