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

L'articolo ti è stato utile? se vuoi ringraziarmi offrimi un caffè, o una pizza se vuoi esagerare!

E non dimenticarti di restare aggiornato abbonandoti gratis ai feed RSS.Se non sai cosa sono, guarda questo video. Ora non sai come abbonarti? Guarda questo video

Inoltre potrai seguirmi su twitter, facebook o friendfeed!

Articoli simili che potrebbero interessarti

Tutorial Jquery – Uno Bellissimo Slideshow Di Foto Originale

Appuntamento con i tutorial su jquery, dove andremo a vedere uno bellissimo slideshow di foto dove potrai realizzare effetti di transizione davvero...

Tutorial Jquery – Bellissime Gallery Di Foto in 5 Minuti

Per la serie di tutorial e risorse su javascript, oggi ti segnalo jPhotoGrid, un fantastico plugin jquery che ti permetterà di realizzare gallerie...

Javascript Vs Flash: The Winner Is..

Javascript! Ormai slideshow, menu e testi animati, e molto altro ancora si possono tranquillamente realizzare con javascript, con il vantaggio di...