Inserire gli Smile in una Textarea con Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Molte applicazioni di pubblico e frequente utilizzo, come Guestbook e forum di discussione, sono solite permettere agli utenti di inserire simboli o immagini, ad esempio delle faccine sorridenti, o comunque espressive a seconda dell'argomento trattato.

In questo Tip non vedremo come effettuare la registrazione sul database e la conversione dei caratteri utilizzati con l'immagine scelta, ma vedremo come inserire i simboli che ci interessano nella Textarea cliccando su un comando, ad esempio l'immagine scelta dall'utente.

Iniziamo col creare la Textarea dell'applicazione di input:

<form name="modulo">
   <textarea name="messaggio" rows="10" cols="30"></textarea>
</form>
A questo punto avremo una serie di smile al cui click dovremo far comparire dei simboli all'interno della Textarea appena creata:
<a href="javascript:Smile(':-)')"><img src="smile1.gif" border="0"></a>
<a href="javascript:Smile(';-)')"><img src="smile2.gif" border="0"></a>
<a href="javascript:Smile(':-(')"><img src="smile3.gif" border="0"></a>
Ipotizziamo quindi di avere una faccina sorridente, una che fa l'occhiolino ed una triste; ad ognuna abbiamo associato la funzione Smile() che esamineremo adesso:
<script language="javascript">
 <!--
   function Smile(quale_faccina)
   {
      document.modulo.messaggio.value += quale_faccina;
   }
 //-->
</script>
In questo modo, al click sulle immagini, i caratteri che compongono lo smile scelto si accoderanno al testo già presente nella Textarea.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (106.555)

:: Breve guida a jQuery (96.818)

:: Le espressioni regolari in Javascript (84.690)

:: Gestione delle stringhe in Javascript (74.154)

:: Stampare una pagina col Dhtml (42.639)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (39.785)

:: Menu orizzontale dinamico in Dhtml (36.961)

:: Gli Array in Javascript (35.690)

:: Temporizzazioni Javascript (31.211)

:: Istruzion condizionali in Javascript: if e switch (28.629)

IN EVIDENZA
DOWNLOAD