5

Gostaria de saber qual a melhor maneira de fazer com que o textarea aumente de altura automaticamente até o limite de 500px quando o usuário entrar com conteúdo.

Não utilize outra biblioteca além do Jquery.

CSS:

textearea{
    resize: none; /* impede que o próprio usuário altere o tamanho do textarea */
    width:300px;
    height:100px;
    overflow-y: auto;
}
2
  • tem um plugin jquery q faz isso
    – Alan PS
    7/04/2014 às 5:34
  • @user3230262 E qual é o plugin? Já vi que a resposta é longe de ser trivial, então referências externas ajudariam bastante...
    – mgibsonbr
    7/04/2014 às 6:23

5 Respostas 5

5

Sempre que o textarea for editado, por qualquer meio (teclado, mouse, Ctrl+V, etc), verifique se seu tamanho na tela é menor que o tamanho do seu conteúdo real (i.e. o conteúdo que está sendo servido pela barra de rolagem) e, enquanto for, aumente o tamanho do elemento.

$("textarea").bind("input", function(e) {
    while( $(this).outerHeight() < this.scrollHeight +
                                   parseFloat($(this).css("borderTopWidth")) +
                                   parseFloat($(this).css("borderBottomWidth"))
           && $(this).height() < 500 // Altura máxima
    ) {
        $(this).height($(this).height()+1);
    };
});

Fonte: essa resposta no SOen.

Exemplo no jsFiddle. Notas:

  • Se você atribuir programaticamente o conteúdo do textarea, deverá invocar o código acima manualmente (pois o input não faz isso pra você);
  • O código acima talvez possa ser melhorado para evitar esse loop que incrementa de um por um, mas como a resposta original fazia assim (e estou sem tempo pra testar as alternativas) preferi deixar como estava.
    • O uso de outerHeight em vez de simplesmente height é para levar em conta o padding (e opcionalmente também a margin) em vez de se considerar somente a altura do conteúdo. Talvez por isso o incremento de um em um, já que caso contrário o cálculo seria mais complexo (e na prática, não reparei nenhum problema na performance percebida).
  • Minha resposta alternativa (no histórico de edição) não funciona em todos os casos, por diversos motivos. Minhas tentativas de calcular o tamanho do conteúdo por outros meios (ex.: usando um elemento auxiliar) também não tiveram sucesso, de modo que essa foi a solução mais completa e simples que achei.
1
  • 1
    Gostei da sua solução pelo detalhe que evita a barra de rolagem aparecer enquanto o tamanho do textarea não atingir o 500px, por isso irei atribuir como melhor resposta, apesar de não funcionar no IE. Ainda estou estudando ambos os códigos para realizar melhorias, obrigado pela colaboração.
    – Paulo
    7/04/2014 às 22:08
5

Aqui fica outra ideia:

$('#texto').on('keyup onpaste', function () {
    var alturaScroll = this.scrollHeight;
    var alturaCaixa = $(this).height();

    if (alturaScroll > (alturaCaixa + 10)) {
        if (alturaScroll > 500) return;
        $(this).css('height', alturaScroll);
    }
});

Exemplo

Este código corre cada vez que uma letra é inserida (quando a tecla é solta) ou quando texto é copiado para o textarea com o evento onpaste.

Quando a tecla é levantada o código lê a altura do Scroll e da caixa. Se o scroll fôr maior então faz a caixa aumentar até ao limite de 500.

Como o @mgibsonbr referiu o evento input tem vantagens sobre o keyup, talvez boa ideia usar os três. O input tem a desvantagem de não ser aceite nalguns browsers. O IE sendo um deles.

5
  • A vantagem do input sobre keyup (em teoria, pelo menos) é que se você segurar uma tecla e não soltar mais, o textarea vai sendo preenchido mas a altura não aumenta. E se ela passar de 500 enquanto se está fazendo isso, ela não aumenta mais - fica com a que estava naquele momento.
    – mgibsonbr
    7/04/2014 às 7:00
  • 1
    @mgibsonbr, boa sugestão! Juntei essa ideia à resposta, obrigado e referí que o IE (para não fugir à tradição) nao lida bem com o input.
    – Sergio
    7/04/2014 às 7:06
  • Não sei se você e o @mgibsonbr classificam como reparo técnico (gambiarra) isso, mas eu usaria uma aproximação das mais simples possíveis, e um timer para fallback (levíssimo, de 3 segundos pra cima).
    – Square Obama
    7/04/2014 às 14:38
  • @Bacco Acho que depende dos seus objetivos. Eu gostei do código da minha resposta porque é bastante preciso e não dá nenhum glitch visual. Mas com certeza muita gente ficaria hororrizada ao ver um loop que incrementa de um em um...
    – mgibsonbr
    7/04/2014 às 21:31
  • @mgibsonbr agora vocês precisam inventar um que diminua se o texto for cortado :)
    – Square Obama
    7/04/2014 às 21:32
1

Fiz uma pequena alteração para ele voltar ao tamanho padrão se a pessoa desistir de escrever e apagar o que tinha escrito deixando o textarea vazio. No meu caso a altura é de 40px.

$('textarea[name="responder"]').on('keyup change onpaste', function () {
    var alturaScroll = this.scrollHeight;
    var alturaCaixa = $(this).height();

    if (alturaScroll > (alturaCaixa + 10)) {
        if (alturaScroll > 500) return;
        $(this).css('height', alturaScroll);
    }

    if( $(this).val() == '' ){
        // retonando ao height padrão de 40px
        $(this).css('height', '40px');
    }
});

Infelizmente não consegui fazer ele diminuir gradativamente quando a pessoa vai deletando letra por letra, mas no meu caso já foi o suficiente. Espero que isso possa ajudar mais alguém e obrigado pela ajuda que me deram com este código.

0

//Dei uma alterada para pegar automaticamente todos os textboxes do formulário e fazer o resizer.

function ResizeTextArea(){ 
    for (var j=1; j < form.length-1; j++){
        if (form[j].type=="textarea"){

            txtBox = form[j];
            nCols = txtBox.cols;
            sVal = txtBox.value;
            nVal = sVal.length;

            nRowCnt = 1;

            for (i=0;i<nVal;i++){ 
                if ((sVal.charAt(i).charCodeAt(0) == 13) || (sVal.charAt(i).charCodeAt(0) == 10)){ 
                    nRowCnt = nRowCnt +1;
                } 
            }

            if (nRowCnt < (nVal / nCols)) {
                nRowCnt = 2 + (nVal / nCols); 
            }
            if (nVal == 0){
                nRowCnt = 1; 
            }
            txtBox.rows = nRowCnt;
        }
    }
}
0

Solução completa com altura mínima e máxima e resolvendo problemas com scroll:

var textarea =
{
    tornarFlex:
        function (id_textarea, altura_minima, altura_maxima)
        {
            var textarea = document.getElementById(id_textarea);
            if (typeof altura_minima == 'undefined')
            {
                altura_minima = textarea.offsetHeight;
            }
            if (typeof altura_maxima == 'undefined')
            {
                altura_maxima = 0;
            }
            textarea.style.height = altura_minima + 'px';
            textarea.addEventListener('keyup', new Function("textarea.ajusta('" + id_textarea + "'," + altura_minima + ", " + altura_maxima + ");"));
        },
    ajusta:
        function(id_textarea, altura_minima, altura_maxima)
        {
            var textarea = document.getElementById(id_textarea);
            while 
            (
                textarea.offsetHeight < textarea.scrollHeight 
                && (!altura_maxima || textarea.offsetHeight < altura_maxima)
            )
            {
                textarea.style.height = (textarea.offsetHeight + 1) + 'px';
            };
            if (textarea.offsetHeight < altura_maxima)
            {
                textarea.style.overflowX = 'hidden';
                textarea.style.overflowY = 'hidden';
            }
            else
            {
                textarea.style.overflowX = 'visible';
                textarea.style.overflowY = 'visible';
            }
        }
};

textarea.tornarFlex(id_elemento, 20, 100);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .