Allungare una textarea all'aumentare dei contenuti inseriti
Il web è una minera inesauribile di spunti e idee interessanti. La Rete rappresenta, per definizione, una ambiente di contuna sperimentazione dove ogni giorno vengono partorite nuove idee, alcune geniali altre, più semplicemente, curiose ed interessanti.
Dal punto di vista del web design, uno degli "effetti speciali" che preferisco consiste nella gestione dinamica delle dimensioni di una textarea al variare dei contenuti inseriti dall'utente. In poche parole: più contenuti scrive l'utente e più grande diventa la textarea. Da un punto di vista psicologico si tratta di un invito a continuare a scrivere equivalente al dire "ehi! scrivi pure quanto vuoi, qui c'è spazio!".
In questo articolo vi propongo una semplice funzione Javascript per gestire questo simpatico effetto. La funzione in oggetto non fa altro che allungare la textarea nel momento in cui i contenuti superano la sua naturale capienza (evitando, di fatto, la comparsa della barra di scorimento verticale). Ecco il codice:
function moreWords(id, maxHeight) {
// creo una variabile per l'accesso alle proprietà di stile della textarea
var txtarea = id && id.style ? id : document.getElementById(id);
// se non riesco esco senza fa nulla
if (!txtarea) return;
// creo una variabile in cui salvo inizialmente l'altezza attuale della textarea
var newHeight = txtarea.clientHeight;
// se l'altezza massima non è stata impostata o questa è maggiore dell'altezza attuale...
if (!maxHeight || maxHeight > newHeight) {
// ridefinisco il valore di newHeight individuando il maggiore tra l'altezza dei contenuti (scrollHeight) ed il suo valore attuale
newHeight = Math.max(txtarea.scrollHeight, newHeight);
// se l'altezza massima è stata impostata..
if (maxHeight)
// ridefinisco il valore di newHeight individuando il valore minore tra l'altezza massima (maxHeight) ed il suo valore attuale
newHeight = Math.min(maxHeight, newHeight);
// se l'altezza calcolata (newHeight) è maggiore di quella attuale della textarea
// effettuo la modifica ed allungo la textarea
if (newHeight > txtarea.clientHeight) {
txtarea.style.height = newHeight + "px";
txtarea.style.overflow = "hidden";
}
}
// se l'altezza massima è stata raggiunta mostro la barra di scorrimento
else if (maxHeight && maxHeight <= newHeight) {
txtarea.style.overflow = "auto";
}
}
La funzione accetta due parametri, uno obbligatorio (l'identificativo della textarea su cui applicare l'effetto) ed uno facoltativo (l'eventuale altezza massima in pixel).
Circa i vari passaggi utilizzati per creare la funzione credo ci sia poco da aggiungere ai commenti già presenti nel codice.
L'utilizzo della funzione è molto semplice: all'evento onkeyup sulla nostra textarea viene lanciata la funzione che non fa altro che ricalcolare, ad ogni tasto premuto, se l'altezza è adeguata ai contenuti inseriti:
<textarea onkeyup="moreWords(this)"></textarea>
Un esempio funzionante del codice proposto può essere visionato a questa pagina.
Unico limite di questa funzione è l'incapacità di contrarsi se l'utente elimina del testo... in questo caso, infatti, la textarea resta delle dimensioni precedenti alla riduzione, in quanto il nostro codice è stato pensato unicamente per l'espansione dello spazio e non per la sua contrazione. Ad ogni modo, se lo desiderate, potete aggiungere questa funzionalità aggiungendo poche righe di codice.
