Guide, risorse e articoli per webmaster e webdesigner

Add to Google Reader or Homepage

domenica 18 maggio 2008


Risorse

Sfondi per siti web

Menù

Home
Html & XHtml
Css
Javascript
Php
Motori di ricerca
News web
Contatti

Login Form






Password dimenticata?
Nessun account? Registrati
Home arrow Javascript arrow Dynamic Html arrow Preview del testo digitato in una textarea

Preview del testo digitato in una textarea Stampa E-mail
Scritto da Vincenzo   
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> 

 

 
< Prec.   Pros. >


Articoli correlati

Feed Rss


Corso Javascript e DHTML
Guida completa allo scripting lato client. Corso con tutor ed attestato finale!