Ajuste Automático de Altura para Textareas e Remoção de Scrollbars em HTML/CSS
Resposta Rápida
A altura de uma textarea pode ser ajustada dinamicamente utilizando JavaScript. Primeiro, defina o valor de style.height como '5px', e em seguida, ajuste-o para o seu scrollHeight. A solução abaixo funciona perfeitamente:
function autoGrow(el) {
el.style.height = '5px';
el.style.height = el.scrollHeight + 'px';
}
// Vincule esta função ao evento 'input'
document.getElementById('textarea').addEventListener('input', function() {
autoGrow(this);
});Com esse código, seu elemento <textarea> aumentará suavemente de altura à medida que você digita, evitando que a barra de rolagem apareça.
Por Trás das Cenas
Para entender melhor como o ajuste automático de tamanho funciona, precisamos considerar o conceito de scrollHeight. Este é um valor que representa a altura total do conteúdo de um elemento, incluindo sua parte invisível.
Definir style.height como '5px' permite que scrollHeight calcule a altura necessária para todo o conteúdo, removendo efetivamente a barra de rolagem. Os usuários apreciam esta abordagem pela sua conveniência.
Tratando Casos Especiais
Embora o script básico seja bastante efetivo, há várias considerações adicionais a serem abordadas:
Versatilidade
Usar JavaScript puro garante compatibilidade entre navegadores e comportamento estável do sistema, sem a necessidade de incluir bibliotecas externas.
Tratando Eventos de Carregamento da Página e Redimensionamento da Janela
É aconselhável aprimorar a função autoGrow para que ela seja acionada tanto no carregamento da página quanto ao redimensionar a janela:
// Executar a função no carregamento da página
window.addEventListener('load', function() {
autoGrow(document.getElementById('textarea'));
});
// E ao redimensionar a janela
window.addEventListener('resize', function() {
autoGrow(document.getElementById('textarea'));
});Integração com Frameworks
Em projetos baseados em jQuery, usar o plugin AutoSize é conveniente. Ao trabalhar com AngularJS, pode-se criar uma diretiva utilizando $timeout para levar em conta as mudanças no scrollHeight após interações no DOM.
Controle de Tamanho
Para manter os tamanhos das textareas dentro de um intervalo específico, defina restrições em CSS, como min-height: 50px; e max-height: 200px;.
Para Entusiastas de Bibliotecas
Se o seu projeto se beneficiaria do uso de um script ou biblioteca adicional, como o Autosize.js de Jack Moore, optar por esse método seria justificado. Prefere usar o jQuery? Então considere utilizar o AutoSize.
Usando Autosize.js:
// Redimensione automaticamente todas as textareas sem complicações!
autosize(document.querySelectorAll('textarea'));Usando jQuery AutoSize:
// Ajuste todas as textareas com um único comando!
$('textarea').autosize();Visualização
Um exemplo de uma textarea que ajusta automaticamente sua altura pode ser visualizado como um copo que muda suas proporções com base na quantidade de líquido que contém.
| Quantidade de Texto | Altura Correspondente do Campo |
| -------------------- | ------------------------------ |
| Pequeno | 🥃 (copo baixo) |
| Médio | 🍹 (copo médio) |
| Grande | 🍸 (copo alto) |Assim como um copo, a textarea se adapta para acomodar todo o conteúdo, evitando a barra de rolagem.
Solução de Problemas e Respostas
Scrollbars Intermitentes
Se você encontrar flickering na barra de rolagem durante o redimensionamento, certifique-se de definir a propriedade CSS overflow: hidden;. Isso ajudará a evitar a aparição inesperada de uma barra de rolagem.
Tamanho Inicial Incorreto
O problema pode ser causado por estilos CSS que interferem na função autoGrow. Preste atenção em propriedades como box-sizing e padding que podem afetar as dimensões.
Preocupações de Desempenho
Com o uso extensivo de textareas ou redimensionamentos frequentes, o desempenho pode diminuir. Otimizar o tratamento de eventos é crucial ao redimensionar a janela.
Recursos Úteis
- Entradas e Textareas que Crescem Automaticamente | CSS-Tricks — Uma visão detalhada do mecanismo para redimensionar automaticamente campos de texto usando CSS e JavaScript.
- Criando uma textarea com auto-redimensionamento - Stack Overflow — Discussões e várias soluções para o problema de redimensionamento automático de áreas de texto.
- GitHub - jackmoore/autosize — Um script simples para redimensionamento automático de textareas.
- Apenas um momento... - CodePen — Um exemplo interativo de redimensionamento automático de textarea.
- Autosize — Um plugin jQuery leve para redimensionamento instantâneo de textareas.