Add to Google

venerdì 12 marzo 2010



Advertisement


Risorse

Sfondi per siti web

Menù

Home
Html & XHtml
Css
Javascript
Php
Motori di ricerca
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

Tag

speciale errore pconnect relative utilizzare specificate table cifre robots poich indice porta maggiore usare chiama immagini opzionali format short scopo

Joomla Modul


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