Corsi on-line

Ridimensionamento automatico delle textarea con jQuery

Textarea AutoSize è il nome di un’interessante estensione per il framework JavaScript jQuery che permette di adattare verticalmente una textarea in base all’input di un utilizzatore; l’output generato dall’azione del plugin, che verrà prodotto senza la necessità di librerie addizionali, potrà essere stilizzato facilmente tramite la definizione di regole di stile CSS.

jQuery

Per utilizzare Textarea AutoSize sarà necessaria innanzitutto l’inclusione del file di jQuery, successivamente si potrà richiamare quello dell’estensione ed effettuare una richiesta al metodo textareaAutoSize(); lo script seguente rappresenta un esempio d’impiego con textarea su riga singola:

<textarea class="js-auto-size" rows="1"></textarea>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="jquery.textarea_autosize.min.js"></script>
<script>
$('textarea.js-auto-size').textareaAutoSize();
</script>

Tramite CSS si avrà la possibilità di stabilire l’altezza minima e massima della textarea da determinare in base alla dimensione del font adottato e all’altezza della riga; dei due parametri quello relativo all’altezza massima è da considerarsi opzionale.

textarea {
  box-sizing: border-box;
  max-height: 150px;
  min-height: 31px;
}

Disponibile sotto licenza Open Source, Textarea AutoSize è supportato dalle versioni più aggiornate dei browser Google Chrome, Mozilla Firefox, Apple Safari 6 o superiore e Internet Explore 9 o successivo.

Via Textarea AutoSize

Post correlati
I più letti del mese
Tematiche