Fw

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

	Scrivi e la textarea si ingrandirà
		
			Prova a scrivere e vedrai che la textarea 
            si ridimensionerà automaticamente
		

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.

Scarica il sorgente

Guarda il tutorial