18.11.2024

Auto-redimensionamento de Textarea com Base no Conteúdo Usando CSS

Resposta Rápida

Configurar o redimensionamento automático de um elemento <textarea> somente com CSS é inviável. Em vez disso, utilizar um simples script em JavaScript juntamente com um <div> auxiliar oculto pode ser considerado uma solução elegante e discreta para esse problema.

<div style="position:relative;">
  <textarea class="auto-expand" style="min-height:40px; height:auto; overflow:hidden; resize:none;"></textarea>
  <!-- O div espelho invisível está sempre com você -->
  <div class="mirror-text" style="white-space:pre-wrap; visibility:hidden; position:absolute; z-index:-1;"></div>
</div>

// O div espelho age como o reflexo de uma bola — sempre pronto para ajudar
document.querySelector('.auto-expand').addEventListener('input', function() {
  document.querySelector('.mirror-text').textContent = this.value;
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + 'px';
});

<div class="mirror-text"> replica invisivelmente o comportamento do textarea e copia com precisão suas dimensões.

Por Que Somente CSS Não Funciona

Implementar redimensionamento dinâmico de um textarea usando apenas CSS é impossível porque, ao contrário do JavaScript, o CSS não fornece funcionalidades para se adaptar ao conteúdo dentro de um bloco. Soluções conhecidas, como overflow:auto ou resize:vertical, não resolvem o problema, pois requerem interação do usuário ou permanecem estáticas.

O Atributo 'contenteditable' — Nosso Coringa

Se o uso de JavaScript não for um problema, o atributo contenteditable pode substituir com sucesso o <textarea>. Ele permite que qualquer elemento seja editável e ajuste automaticamente seu tamanho com base no conteúdo. No entanto, lembre-se da necessidade de higienizar os dados de entrada para evitar inserções de HTML.

<div contenteditable="true" style="min-height:40px; max-height:200px; overflow:auto;">
  Coloque seu texto editável aqui
</div>

Esse bloco irá expandir proporcionalmente ao seu conteúdo; no entanto, recuperar dados do div ao enviar um formulário exigirá JavaScript.

Melhorando a Usabilidade

Apesar das limitações do CSS puro, definir o tamanho de um textarea usando o atributo resize:vertical torna esse elemento mais amigável.

.auto-expand {
  min-height: 40px;
  max-height: 200px;
  resize: vertical;
  /* Você já ouviu falar de assentos de carro ajustáveis em altura? Conveniente, não é? */
}

O atributo rows define a altura mínima do campo de entrada:

<textarea rows="3"></textarea>

O atributo maxLength, embora não afete diretamente as dimensões, restringe a quantidade de texto e ajuda na colocação ideal.

Visualização

Pense no seu textarea como um contêiner que se adapta flexivelmente ao seu conteúdo:

Antes:           Depois:
+---------+     +-----------------+
| Texto   |     | Texto se encaixa |
| aqui    |     | perfeitamente,   |
+---------+     | sem espaço extra.|
                +-----------------+

Seja um texto ou um parágrafo, o conteúdo preenche eficazmente o contêiner.

📦 <-(Texto)          | 📦<----(Mais texto)----->
   Volume Pequeno       Volume Médio - exatamente certo!   Volume Grande, segurando tudo o que é necessário

Um encaixe perfeito significa que o textarea combina exatamente com o volume de seu conteúdo, eliminando espaços vazios indesejados.

Na Prática: Aplicando em Condições Reais

Uma solução para redimensionar dinamicamente um textarea apenas com CSS continua a ser um objetivo evasivo. No entanto, a quantidade mínima de JavaScript necessária para essa tarefa representa um compromisso aceitável e razoável.

JavaScript Eficiente

O JavaScript usado aqui atua como um ouvinte de evento único, garantindo o redimensionamento do textarea à medida que o usuário digita.

Manipulando o Envio do Formulário

Ao usar o atributo contenteditable, é essencial lembrar que você precisará criar um elemento <input> oculto para armazenar os dados no servidor:

<form>
  <div contenteditable="true" id="editable"></div>
  <input type="hidden" name="textareaContent" id="hiddenInput">
</form>

Em seguida, será necessário JavaScript para sincronizar o conteúdo do bloco editável com o valor do campo de entrada oculto no momento do envio do formulário.

Estilizando com CSS

Usar variáveis CSS simplifica e torna o processo de estilização do textarea e do div auxiliar mais gerenciável:

:root {
  --textarea-font-size: 16px;
  --textarea-line-height: 1.5;
  --textarea-padding: 10px;
}

.auto-expand,
.mirror-text {
  font-size: var(--textarea-font-size);
  line-height: var(--textarea-line-height);
  padding: var(--textarea-padding);
  /* No estilo de "Copiar-colar"? Variáveis CSS dizem "não". */
}

Recursos Úteis

1. Guia Completo de Flexbox | CSS-Tricks — Tudo que você precisa saber sobre o uso de flexbox.
2. resize | CSS-Tricks — Uma descrição detalhada da propriedade resize que permite redimensionar elementos.
3. <textarea>: Elemento de campo de entrada — MDN — Documentação do MDN sobre o elemento <textarea>.
4. Usando Propriedades Personalizadas do CSS — MDN — Uma introdução ao uso de variáveis CSS para criar designs flexíveis.
5. Criando uma área de texto que redimensiona automaticamente — Stack Overflow — Discussão da comunidade sobre áreas de texto com redimensionamento automático.
6. Can I use... Tabelas de suporte para HTML5, CSS3, etc. — Um recurso útil para verificar o suporte do navegador para recursos CSS.

Video

Navigation