jQuery: adattare l'altezza dell'elemento textarea al testo

  • jQuery
  • Gabriele Romanato

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:


<p><textarea id="test" rows="5" cols="20"></textarea></p>

Quindi definiamo una line-height per il nostro elemento:


#test {
    line-height: 1.4;
}​

Infine utilizziamo il nostro plugin:


$('#test').autogrow();
Torna su