Publicado em 13 de jul.

Textarea adaptável

#css #desenvolvimento-frontend #html #textarea

Hey pessoal, como vai?

Estou criando uma aplicação e preciso criar uma textarea adaptável ao que o usuário escreve. Explicando: Ela não teria o resize do usuário, e também não teria o scroll, a ideia é o usuário ir digitando e a textarea ir se expandindo verticalmente. Se não ficou muito claro, o comportamento é igual o de atualizar status do Facebook.

Acho que não deve ter uma solução somente com as propriedades da textarea, já coloquei resize: none, já usei overflow, nada! Quem souber como, ficaria grato!

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

L. Henrique· 13 de jul.

Insanity,

Preparei uma DEMO com o que pediu. Veja abaixo o código utilizado para tal:

HTML

CSS

textarea {

 width: 300px;
 min-height: 30px;
 max-height: auto;
 resize: none;
 overflow: hidden;
}

jQuery 2.2.4

$('#textarea').keyup(function() {
 newHeight(this);
});

function newHeight(element) {
 if ( !$(element).prop('scrollTop') ) {
 do {
 var a = $(element).prop('scrollHeight');
 var b = $(element).height();

 $(element).height(b - 5);
 }
 while ( a && ( a != $(element).prop('scrollHeight') ) );
 };

 // Mude o valor + 30 para qualquer um que desejar.
 $(element).height($(element).prop('scrollHeight') + 30);
};

newHeight($('#textarea'));

Vá digitando um textão que tu vai ver o height dele ir aumentando.

Abraços!