Tutorial Javascript – Realizzare Una Textarea Dinamica
Oggi vediamo un semplice ed efficace tutorial su javascript, dove realizzeremo una textarea dinamica, le cui dimensioni si adatteranno al testo che andiamo ad inserire.
Ci vuole veramente poco per ottenere questo effetto. Vediamo quali sono i passi per realizzarlo.
Scarica i sorgenti prima di iniziare con il tutorial.
Passo 1. Inizializzazione script
Al solito tra i tag head bisogna inserire i codici necessari per inizializzare lo script.
Passo 2. Inserimento della textarea
Ecco il codice HTML per inserire la textarea
Passo 3. Applichiamo lo script
Ora non resta che applicare lo script alla textarea, con queste poche righe di codice.
Passo 4. Textarea con stile
Ognuno di poi poi potrà personalizzare come preferisce la textarea. Ecco un esempio.
body,html { margin: 0; padding: 0; background: #d5b88e; } .label { padding: 5px; font: bold 10px Georgia, sans-serif; } .form { padding: 20px 20px 10px; background: #d5b88e; width: 580px; overflow: hidden; } .form label { font: bold 0.9em Georgia, Arial, sans-serif; color: #583d17; padding: 0 0 0 5px;} .form .w { float: left; clear: both; padding: 5px 5px 0; background: #b39a76; font: bold 0.8em Helvetica, Arial, sans-serif; color: #333; overflow: hidden; } .form .w span { padding: 0 0 5px; float:left; } .form .input { border: 1px solid #d5b88e; line-height: 20px; padding: 5px 5px 5px 5px; margin: 0 0 5px 0; width: 537px; font: 16px Georgia, Arial, sans-serif; } .form .w label { padding:0; }
Questa è una soluzione per rendere le form meno scontate e cercare di coinvolgere maggiormente l’utente nell’interazione con il sito.