Visualizzare il messaggio in anteprima quando si scrive in una textarea

Si apre una pop-up oppure un livello "nascosto" ed ecco che visualizziamo quello che abbiamo appena inserito, e così via...

Non sarebbe meglio se, potessimo visualizzare in "tempo reale" quello che stiamo scrivendo? Credo di si. Almeno eliminiamo qualche passaggio e la correzione può essere apportata immediatamente. Bene! È proprio di questo che ci occuperemo in questo tutorial. Lo faremo attraverso pochissimo codice JavaScript.

Per l´esempio finale ho previsto una textarea ed un elemento di blocco [#box] posto al di sotto di essa nel quale apparirà il commento.

Il codice CSS

Quanto al codice CSS che ci serve per formattare la textarea, o un form in genearale, potete vedere altri articoli nell´apposita sezione. Non mi soffermerò molto su tale descrizione. Come detto prima, il tutto sarà inserito in un form il cui codice è il seguente:

#container{
margin:0 auto;
padding:0;
text-align:left;
background:#e5e5e5;
width: 40em;
}

Questo è il codice del contenitore generale. L´ltro elemento di blocco che conterrà il commento sarà formattato nel seguente modo:

#box{
width:550px;
padding:10px;
margin:10px auto;
border:1px solid #800000;
background:#fff;
color:#000;
}

A tale box sono associate due classi:

#box.commenti p.comment{
padding:0px 5px;
border-bottom:1px solid #800000;
font-size:90%;
}

In ultimo la textarea vera e propria la quale è contraddistinta da un identificativo unico nella nella pagina:

#text{
border:1px solid #800000;
margin: 0 0 5px 20px;
background:#fff;
color:#000;
font-size:.9em;
font-family: 'trebuchet ms',verdana,arial,sans-serif;
}

Fatto questo primo passaggio, vediamo la struttura del form senza, ovviamente, il codice JavaScript nella pagina di esempio.

Il codice JavaScript

Per poter avere questa funzionalità dobbiamo inserire tra i tag <head> e </head> qualche riga di codice JavaScript:

var nuovariga = /\n/g;
function SostituisciTextDiv() {
var NuovoTesto = document.getElementById("text").value;
NuovoTesto = NuovoTesto.replace(nuovariga, "<br />");
var DivElement = document.getElementById("anteprima");
DivElement.innerHTML = NuovoTesto;
}

La variabile var nuovariga inizializza una variabile, appunto, la quale rappresenta il codice di avanzamento di riga o New Line [\n]. Dopodichè si crea una funzione [function] nominata SostituisciTextDiv(). Il nome assegnato si spiega da sé. All'´interno di questa funzione viene creata un´altra variabile [var NuovoTesto] attraverso il DOM per poter accedere ad un elemento in un documento HTML. Come ho avuto modo di scrivere in un altro articolo precedente, attraverso il metodo document.getElementById possiamo recuperare l´elemento che ha il valore unico del proprio attributo ID; in questo caso "text" che, se ricordiamo, è l´identificatore assegnato alla textarea. Al rigo successivo si dichiara che la variabile "NuovoTesto" deve essere posizionata su una nuova riga quando premiamo il tasto "INVIO" della tastiera. Ancora un´altra variabile: var DivElement: anche in questo caso si recupera quanto scritto nell´elemento anteprima. Questi altro non è che il box nel quale verrà stampato a video il nostro messaggio. L´ultimo rigo DivElement.innerHTML = NuovoTesto sostituisce il contenuto di "Element" con il testo html specificato, cioè "NuovoTesto".

Associare il codice JavaScript alla textarea

Ovviamente per fare in modo che la funzione appena vista produca il su effetto, deve essere associata alla textarea, perchè è attraverso questa che si "trasferisce" il testo nel box sottostante. Per fare ciò dobbiamo semplicemente scrivere:

<textarea id="text" onkeyup=SostituisciTextDiv();></textarea>  

La proprietà onkeyup di un oggetto HTMLElement specifica un gestore di eventi richiamato quando l´utente rilascia un tasto sull´elemento. Direi che è ciò che fa al caso nostro. Come ultimo passaggio, non resta che mostrare la pagina di esempio completo.