Autoresize di una textarea in stile Facebook con jQuery

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Quando scriviamo un testo in una textrarea su Facebook possiamo notare che, a seconda della lunghezza (in termini di altezza) del ostro testo, la textarea si ridimensiona, dandoci la possibilità di vedere il testo che abbiamo scritto, anche se il testo i qu4estione è più "alto" rispetto alle dimensioni predefinite della textarea.

Questo effetto è semplicemente implementabile con jQuery, grazie al plug-in autoResize, scaricabile da qusta pagina in versione editabile e "min", in cui sono anche documentati i browser (e relative versioni) con cui il plug-in è compatibile e vi sono le documentazioni di tutti i metodi.

Un esempio basilare, senza "fronzoli", è il seguente.

Per prima cosa, includiamo jQuery ed il plug-in autoResize:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="autoresize.jquery.js"></script>

Creiamo quindi lo script che, al caricamento della pagina, intercetta l'evento sulla textarea e la ridimensiona a seconda di quel che ci scriviamo:

<script type="text/javascript">
$(document).ready(function() {
	$('#testo').autoResize({});
});
</script>

In fine, ecco la textarea, corredata dell'ID con cui è stata richiamata nel precedente script.

<textarea id="testo" rows="3" cols="50"></textarea>

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (105.572)

:: Breve guida a jQuery (95.499)

:: Le espressioni regolari in Javascript (84.488)

:: Gestione delle stringhe in Javascript (73.450)

:: Stampare una pagina col Dhtml (42.491)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (38.658)

:: Menu orizzontale dinamico in Dhtml (36.791)

:: Gli Array in Javascript (35.520)

:: Temporizzazioni Javascript (30.941)

:: Istruzion condizionali in Javascript: if e switch (28.429)

IN EVIDENZA
DOWNLOAD