TRUCCHI E MALIZIE IN BREVE
Spiegazioni e approfondimenti
- innerHTML
- Metodo per il quale i tag HTML sono interpretati come codice
- replace(/\n/g,"<br/>")
- Sostituisce tutti i ritorni a capo con il tag <br>
Approfondimento su replace
Approfondimento su /n
- document.getElementById("testo")
- Restituisce l'elemento di cui è specificato l'ID, nel nostro caso "testo", che è, come vedremo, il nome della casella di testo
Creare al volo l'anteprima di una pagina web
Esempio
Codice
Da inserire nell'intestazione:
<script language=Javascript type="text/javascript">
function anteprima(){
contenuto=document.getElementById("testo").value;
// trasformo a capo in <br/>
contenuto=contenuto.replace(/\n/g,"<br/>");
document.getElementById("Vista").innerHTML=contenuto;
}
</script>
<style>
/*Cambiare lo stile della casella di testo*/
textarea{
font-family:verdana, arial;
font-size:10px;
width:450px; height: 100px;
}
#Vista{
/*Cambiare lo stile dell'Anteprima
font-family:verdana, arial;
font-size:10px;
width:450px; height: 100px;
border:1px solid navy;
background-color:#eeeeee;
overflow:auto;
}
</style>
|
Da inserire nel corpo del documento:
<p>CASELLA DI TESTO</p> <textarea id="testo" onkeyup="anteprima()"></textarea> <p>ANTEPRIMA:</p> <div id="Vista"></div> |
Usa la nostra
GUIDA AL LINGUAGGIO HTML per cani, gatti e non solo!
Cerchi un argomento particolare di HTML?
Accedi all'INDICE DETTAGLIATO
Cerchi un trucco complesso?
La nostra sezione
TRUCCHI E MALIZIE
fa proprio al caso tuo!
Altrimenti, usa la ricerca di GOOGLE, magari a partire dal nostro sito!
Il trucco ti è stato utile?
Aggiungi un link!