16.11.2024

Redimensionamento Automático do textarea com Base no Conteúdo

Resposta Rápida

Se você deseja que um <textarea> ajuste automaticamente seu tamanho de acordo com a quantidade de texto inserido, use o seguinte código JavaScript:

document.querySelector('textarea').addEventListener('input', function () {
  this.style.height = 'auto';
  this.style.height = `${this.scrollHeight}px`;
});

Esse código permite que o <textarea> responda dinamicamente às alterações no texto inserido e se expanda conforme necessário.

Garantindo a Compatibilidade entre Navegadores

Compatibilidade com Versões Antigas de Navegadores

Os navegadores, assim como seus usuários, vêm em várias formas. O desafio do desenvolvedor é garantir que seu produto seja compatível com a maioria das versões de navegadores. Para garantir a compatibilidade entre navegadores, você pode usar a abordagem descrita abaixo:

var textarea = document.querySelector('textarea');

function autoResize() {
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
}

if (textarea.attachEvent) {
  textarea.attachEvent('oninput', autoResize); // Para versões desatualizadas de navegadores
} else {
  textarea.addEventListener('input', autoResize);
}

Respondendo a Vários Eventos de Entrada

Tenha em mente que as ações do usuário podem variar — inserir, cortar e arrastar texto também afetam o tamanho do <textarea>. Certifique-se de registrar os eventos apropriados:

['input', 'cut', 'paste', 'drop'].forEach(function(event) {
  textarea.addEventListener(event, autoResize);
});

Tratando Conteúdo Carregado Dinamicamente

Se o conteúdo do <textarea> for carregado de forma assíncrona, o manipulador de eventos load ajudará a inicializar corretamente o tamanho do campo após a página ter sido completamente carregada:

window.addEventListener('load', autoResize);

Estilização para Conforto e Funcionalidade

Estilos Minimalistas para Foco do Usuário

Aplicar estilos simples permitirá que os usuários concentrem-se na tarefa principal — criar conteúdo:

textarea {
  min-height: 40px;
  overflow-y: hidden; // Esconder a barra de rolagem vertical
  border: none; // Remover borda
  background-color: #f5f5f5; // Fundo neutro
  resize: none; // Impedir que o usuário redimensione
}

Redimensionamento Razoável e Consideração de Padding

Permita que o <textarea> cresça não apenas em altura, mas também leve em conta o padding para uma entrada de texto confortável:

function autoResize() {
  var pad = 10; // Definir padding de 10px
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight + pad) + 'px';
}

Consideração sobre Performance

Otimização ao Trabalhar com Vários Campos

Ao trabalhar com vários campos de texto, é importante tratar o processamento de eventos de forma otimizada para evitar sobrecarga desnecessária no sistema. Use técnicas de throttling ou debouncing para limitar a frequência das chamadas de funções.

Independência de Bibliotecas de Terceiros

Apesar da popularidade de bibliotecas como jQuery, é melhor manter-se com JavaScript "puro". Isso tornará seu código mais leve e menos dependente de recursos externos.

Visualização

Imagine que o <textarea> é um balão que infla à medida que o usuário digita texto:

🎈                            🎈🎈📝
(Balão vazio)       (Balão inflando com conteúdo)

À medida que o texto é inserido, o <textarea> aumenta, fornecendo ao usuário espaço amplo para expressar seus pensamentos.

Aprimorando a Experiência do Usuário: Dicas de Profissionais

Começando a Trabalhar com Texto

Facilite a interação dos usuários com a interface definindo o foco no <textarea> após o carregamento da página:

window.addEventListener('load', function () {
  document.querySelector('textarea').focus();
});

Testando Alterações no JSFiddle

Você pode testar sua solução no site JSFiddle. Isso permitirá que você veja rapidamente os resultados do seu código e faça os ajustes necessários.

Recursos Úteis

1. Explore o elemento <textarea> na documentação do MDN para aprender mais sobre suas capacidades e recursos.
2. Investigue vários métodos para criar campos de texto auto-redimensionáveis no Stack Overflow.
3. Familiarize-se com um script simples de Autosize que se adapta automaticamente à altura do campo de texto de acordo com seu conteúdo.
4. Aprofunde-se no tratamento de eventos no navegador no MDN, usando o método addEventListener().
5. Estude detalhadamente o tópico sobre redimensionamento automático de campos de texto lendo um artigo na Impressive Webs.
6. Se preferir usar jQuery, considere o plugin Autosize do registro oficial.

Video

Navigation