Messaggi su textarea e input form


Se non volete tirare in ballo gli oggetti creati con <div>...</div> e <span>...</span> per scrivere semplici messaggi che cambiano, è possibile fare ricorso ai vecchi input form o alle textarea.
Per non usare quelli semplici, che a dire la verità sono un po' bruttini, vi darò qualche dritta per renderli accattivanti e molto meno convenzionali.
Facciamo ricorso ancora una volta agli attributi dei CSS per modificare l'aspetto di un normalissimo input form. In questo caso il codice che ho usato è il seguente:

<input type="text" style="border:1px solid lime;background:black;color:cyan;width:250px" value="Io sono un form. Prova a scrivere qui!">

E il risultato è il seguente:



Quello che si può fare con un input form, si può fare anche su una textarea. Ecco qui di seguito un esempio:


Molto meglio di quella di default, no?
Ecco come ho fatto a crearla:

<textarea rows="5" style="border:3px groove orange;background:firebrick;color:yellow;">
Io sono una textarea.
Prova a scrivere in questo spazio.
Ti piace il mio aspetto?
Modificarlo è molto facile!
</textarea>
Una volta che avete capito come modificare questi elementi, si può passare a creare delle animazioni del testo che è contenuto dentro di essi. Vediamone un esempio:

<form name="form_esempio">
<input type="text" id="input_text_1" style="border:1px solid lime;background:black;color:cyan;width:300px" value="">
<input type="button" style="border:2px solid yellow;background:darkgreen;color:yellow;font-family:'comic sans ms'" onclick="gestore(1);" value="Start">
<input type="button" style="border:2px solid firebrick;background:black;color:red;font-family:'comic sans ms'" onclick="gestore(0)" value="Stop">

</form>

<script language="javascript">

var parziale="";
var da_scrivere="Visita 'The Shiny Side of the Moon'   ";
var i=0;

function anima_testo()
{
if (i>37)
{i=0;
form_esempio.input_text_1.setAttribute("value","");
parziale="";
}
else
{
parziale= parziale+ da_scrivere.charAt(i);
form_esempio.input_text_1.setAttribute("value", parziale);
i++;
}
}

function gestore(azione)
{
if (azione==1)
intv = setInterval("anima_testo()",150);
else if (azione==0)
{
clearInterval(intv);
i=0;
parziale="";
form_esempio.input_text_1.setAttribute("value","");
}
}

</script> 		Definiamo per prima cosa il form che conterrè un campo di input di testo e due bottoni per far partire e fermare l'animazione.
Come potete vedere tutti gli elementi sono modificati tramite attributi dei CSS per renderli meno convenzionali (guardate sotto come si presenta graficamente).
Nello script si definiscono tre variabili al di fuori delle funzioni:
  • parziale è una stringa di testo inizializzata come stringa vuota. Serve per mostrare gli aggiornamenti del testo che scorre.
  • da_scrivere è una stringa di testo che contiene la frase da mostrare, un carattere alla volta.
  • i serve per contare ed estrarre caratteri da da_scrivere

Di seguito inizia la funzione che anima il testo. Per prima cosa controlla il valore di i. Se è maggiore di 37 (numero di caratteri di da_contare) la fa diventare zero (riparte da capo), cancella la scritta nell'input text (la rende uguale alla stringa vuota) e fa lo stesso con la variabile parziale.
Se invece i è minore di 37, la variabile parziale viene aggiornata aggiungendo un carattere preso da da_scrivere e il suo valore viene scritto nell'input form tramite un setAttribute sull'oggetto. La variabile i viene incrementata per estrarre al prossimo passaggio il successivo carattere di da_cercare.

Qui finisce la funzione che si occupa di animare il testo e inizia quella che gestisce le azioni corrispondenti alla pressione dei due bottoni. Questi ultimi le passano un valore ("Start" passa 1 e "Stop" 0), che serve per decidere quello che si deve fare. Se è stato premuto "Start" (viene passato 1), allora si imposta un intervalo per anima_testo(), se invece viene premuto "Stop" (viene passato 0), l'intervallo viene tolto, cancellato il contenuto del form e azzerate le variabili i e parziale.


Come al solito ecco mostrato cosa produce lo script sopra: