Preview del testo digitato in una textarea

In molti casi si ha la necessità di poter far visualizzare agli utenti il testo digitato in una textarea, fornendogli così un’anteprima del messaggio che andranno ad inviare.

Con un semplice script faremo in modo che il testo digitato nella textarea, apparva in anteprima anche in un div che possiamo posizionare in un qualunque punto della pagina.

Innanzitutto definiamo gli stili della textarea e del livello:

<style type="text/css">
    #testo{
        border:1px solid #ff0000;
        background-color#000000;
        color:#ffffff;
    }
    #preview{
        position:absolute;
        top:10px;
        right:10px;
        width:400px;
    }
</style>

Inutile ricordare che lo stile della textarea e del livello possono essere personalizzati a proprio piacimento.

Lo script che andremo a creare servirà a far visualizzare nel livello "preview", il testo digitato nella textarea con identità "testo". 

<script type="text/javascript">
<!--
    function visualizza_testo(){
    contenuto=document.getElementById("testo").value;
    contenuto=contenuto.replace(/\n/g,"<br/>");
    document.getElementById("preview").innerHTML=contenuto;
}
//-->
</script>

Per richiamare la funzione visualizza_testo(), ci basterà associarla all’evento onkeyup della textarea:

<textarea id="testo" onkeyup="visualizza_testo()"></textarea> 

Popularity: 2% [?]

Vuoi essere sempre aggiornato???  Iscriviti  ai feed o invia un  trackback