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 (107.294)

:: Breve guida a jQuery (97.739)

:: Le espressioni regolari in Javascript (84.839)

:: Gestione delle stringhe in Javascript (74.635)

:: Stampare una pagina col Dhtml (42.759)

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

:: Menu orizzontale dinamico in Dhtml (37.093)

:: Gli Array in Javascript (35.808)

:: Temporizzazioni Javascript (31.416)

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

IN EVIDENZA
DOWNLOAD