Show preview textarea

Questo è un semplice metodo scritto in javascript che permette di realizzare una preview textarea javascript.

Permette di vedere in tempo reale, durante la digitazione in una textarea, la preview del testo digitato mantenendo la formattazione del testo che verrà visualizzato.

Lo script a ogni pressione di un tasto all’interno della textarea copia il contenuto del testo all’interno del div sottostante.

Il codice non fa altro che creare tramite html una textarea editabile.

Alla textarea creata viene associata una funzione javascript che ha il compito di copiare il testo inserito e riscriverlo in un box non editabile.

Codice Html e Javascript


<style>
   textarea{font-family:verdana, arial; font-size:10px; 
            width:300px; height: 100px;}
   #preview{font-family:verdana, arial; font-size:10px;
            width:300px; height: 100px; border:1px solid #000000;
            background-color:#cccccc; color:#8F3E3E; overflow:auto;}
</style>
<script>
function showpreview(){
  contenuto_testo=document.getElementById("testo").value;
  contenuto_testo=contenuto_testo.replace(/n/g,"<br/>");
  document.getElementById("preview").innerHTML=contenuto_testo;
}
</script>
  
<textarea id=”testo” onkeyup=”showpreview()”></textarea>
    <br/>Preview:<br/>
    <div id=”preview”></div>

Allo stesso modo è possibile riscrivere il codice per creare una textarea in jQuery con la semplice modifica delle parole chiave.

JQuery infatti è un framework per javascript e semplifica molto la scrittura del codice.

E’ possibile testare il codice utilizzando uno dei tanti servizi online che permettono test di codice javascript.

Uno tra i più utilizzati è il sito CodePen.

Per qualsiasi problema o informazione lasciate un commento nel box sottostante.

Tag: , , ,