Programmazione Web » Javascript » Scrivere in una textarea con un click
Scrivere in una textarea con un click
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1087 volte
In molte applicazioni web-based ci capita spesso di interagire con dei form in cui è possibile inserire immagini o codici particolari semplicemente cliccando su un testo o su un'immagine.
Bene, nell'esempio di oggi vedremo come sia possibile realizzare un modulo del genere usando Html ed un pizzico di Javascript.
Ci toccherà realizzare un form dando la possibilità all'utente di inserire del testo in un campo semplicemente cliccando su una voce!
Innanzitutto vediamo come realizzare il form, privo di ogni funzionalità. Nel codice seguente abbiamo chiamato "modulo" il form e "messaggio" la textarea:
<form name="modulo" id="modulo" method="post" action="">
<textarea name="messaggio" cols="50" rows="8" id="messaggio"></textarea>
<input type="submit" name="Submit" value="Invia" />
</form>
Adesso aggiungeremo tutti i simboli che vogliamo inserire facendo in modo che, cliccando su di essi, compaia il testo relativo nella textarea. Nel nostro esempio realizzeremo un sistema capace di assegnare un codice identificativo ad ogni persona, per esempio:
1 = Michele Sassi
2 = Mario Rossi
3 = Alessandro Bianchi
Ecco il codice:
<div OnClick="document.modulo.messaggio.value+='1'">Michele Sassi </div>
<div OnClick="document.modulo.messaggio.value+='2'">Mario Rossi </div>
<div OnClick="document.modulo.messaggio.value+='3'">Alessandro Bianchi </div>
A questo punto cliccando su Michele Sassi verrà aggiunto il valore '1' nella textarea, cliccando su Mario Rossi verrà aggiunto il valore '2' ed infine, cliccando su Alessandro Bianchi verrà aggiunto il valore '3'.
Tutto ciò è possibile grazie ad una riga di Javascript che aggiunge un determinato valore (quello tra gli apici) allo scatenarsi dell'evento OnClick su di un elemento (nel nostro caso un div).
Ecco a voi il codice completo:
<form name="modulo" id="modulo" method="post" action="">
<div OnClick="document.modulo.messaggio.value+='1'">Michele Sassi </div>
<div OnClick="document.modulo.messaggio.value+='2'">Mario Rossi </div>
<div OnClick="document.modulo.messaggio.value+='3'">Alessandro Bianchi </div> </p>
<textarea name="messaggio" cols="50" rows="8" id="messaggio"></textarea>
<input type="submit" name="Submit" value="Invia" />
</form>
N.B.: Molto spesso questo sistema viene usato per l'inserimento delle emoticon nei forum e nei guestbook!
Aggiungi questo tutorial ai preferiti
