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 (109.278)

:: Breve guida a jQuery (101.059)

:: Le espressioni regolari in Javascript (85.389)

:: Gestione delle stringhe in Javascript (75.895)

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

:: Stampare una pagina col Dhtml (43.144)

:: Menu orizzontale dinamico in Dhtml (37.504)

:: Gli Array in Javascript (36.314)

:: Temporizzazioni Javascript (32.044)

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

IN EVIDENZA
DOWNLOAD