jQuery: adattare l'altezza di una textarea al testo durante la digitazione

jQuery: adattare l'altezza di una textarea al testo durante la digitazione

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

Torna su