L'elemento textarea ha un piccolo svantaggio: quando la sua altezza non è sufficiente a contenere il testo compare una barra di scorrimento verticale che certamente non facilita la compilazione del campo. Possiamo ovviare a questo problema con jQuery creando un plugin che automaticamente adegui l'altezza dell'elemento alla quantità di testo presente.
Il nostro plugin è il seguente:
(function( $ ) {
$.fn.autogrow = function() {
return this.each(function() {
var textarea = this;
$.fn.autogrow.resize( textarea );
$( textarea ).focus(function() {
textarea.interval = setInterval(function() {
$.fn.autogrow.resize( textarea );
}, 500);
}).blur(function() {
clearInterval( textarea.interval );
});
});
};
$.fn.autogrow.resize = function( textarea ) {
var lineHeight = parseInt( $( textarea ).css( "line-height" ), 10 );
var lines = textarea.value.split( /\n/ );
var columns = textarea.cols;
var lineCount = 0;
$.each( lines, function() {
lineCount += Math.ceil( this.length / columns ) || 1;
});
var height = lineHeight * ( lineCount + 1 );
$( textarea ).css( "height", height );
};
})( jQuery );
Definiamo una textarea di questo tipo:
<textarea id="test" rows="5" cols="20"></textarea>
Quindi definiamo una line-height per il nostro elemento:
#test {
line-height: 1.4;
}
Infine utilizziamo il nostro plugin:
$( "#test" ).autogrow();