Autoresize di una textarea in stile Facebook con jQuery

Corso Javascript Impara a creare controlli ed animazioni

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>

TAGS - jquery, jquery autoresize, ridimensionare textarea