Textarea auto-resize Componentes

O que é

Numa caixa de mensagem comum, quem escreve um texto maior fica espremido numa janelinha com barra de rolagem. Com sw-textarea, a caixa aumenta de altura a cada linha nova e diminui quando o texto é apagado. Você escolhe a altura com que ela nasce (sw-textarea-min) e, se quiser, a altura máxima (sw-textarea-max) — passando dela, aí sim aparece a rolagem por dentro. Serve para mensagem de contato, comentário, observações de pedido, descrição de produto no painel.

Precisa do JavaScript do SWCore (para medir) e do CSS (para o visual do campo, com sw-inp). A cada tecla, ele mede a altura do texto e ajusta a caixa, sempre entre o mínimo e o máximo. Também reajusta quando a janela muda de tamanho. A alça de redimensionar do canto some, porque quem cuida da altura agora é ele. As medidas são em pixels, sem escrever "px".

Quando usar

• Mensagem do formulário de contato: começa pequena e cresce se a pessoa escrever mais.
• Comentários e avaliações: uma linha só no começo, sem assustar quem vai escrever pouco.
• Observações de pedido, descrição de produto no painel: com teto (sw-textarea-max) para não empurrar o resto da tela.
• Quando o texto tem limite de letras, junte com o Contador de caracteres no mesmo campo.

Comece aqui

1. 1

   Coloque o SWCore na página: o CSS no <head> e o JavaScript antes de fechar o </body>.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   <!-- … sua página … -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Coloque sw-textarea no <textarea> (junto de sw-inp, para o visual do SWCore). Vá apertando Enter.

   Sua mensagem

   <div sw-fld>
     <label for="mensagem">Sua mensagem</label>
     <textarea sw-inp sw-textarea id="mensagem" name="mensagem"
               placeholder="Escreva e aperte Enter algumas vezes…"></textarea>
   </div>

3. 3

   Quer controlar os tamanhos? Diga a altura inicial e a máxima, em pixels.

   <textarea sw-inp sw-textarea sw-textarea-min="44" sw-textarea-max="160"
             placeholder="Nasce com 44 px e para em 160 px…"></textarea>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<form sw-frm action="/contato" method="post">
  <div sw-fld="float">
    <input sw-inp id="nome" name="nome" placeholder=" ">
    <label for="nome">Seu nome</label>
  </div>
  <div sw-fld="float">
    <textarea sw-inp sw-textarea sw-textarea-min="96" sw-textarea-max="260"
              id="msg" name="msg" placeholder=" "></textarea>
    <label for="msg">Como podemos ajudar?</label>
  </div>
  <div sw-frm-act><button sw-btn="pri" type="submit">Enviar</button></div>
</form>

<div class="flx gap-3">
  <span sw-avt>MS</span>
  <div class="f-1 flx f-cl gap-3">
    <textarea sw-inp sw-textarea sw-textarea-min="44" sw-textarea-max="180"
              name="comentario" aria-label="Comentário"
              placeholder="Escreva um comentário…"></textarea>
    <div class="flx j-en"><button sw-btn="pri p">Comentar</button></div>
  </div>
</div>

<textarea sw-inp sw-textarea sw-textarea-min="60" id="descricao"></textarea>

<script>
  const campo = document.getElementById('descricao');
  campo.value = textoQueVeioDoBanco;
  campo.dispatchEvent(new Event('input')); // avisa o SWCore para medir de novo
</script>

Precisa de quê

• swcore.min.js — mede e ajusta a altura.
• swcore.min.css — para o visual do campo com sw-inp.

Cuidados — erros comuns

• Os números são em pixels e sem unidade: sw-textarea-max="200", não "200px" nem "20rem".
• Mudou o texto pelo JavaScript (campo.value = …)? A altura não se ajusta sozinha: dispare campo.dispatchEvent(new Event('input')) logo depois (ou chame SW.reinit(), que também re-mede).
• Se o campo nasce escondido (numa aba ou num painel fechado) já com texto, ele abre baixinho. Quando mostrar, dispare o mesmo input para medir de novo.
• O mínimo do sw-textarea-min vale mais que os tamanhos p/g do sw-inp: para mudar a altura inicial, use o atributo.
• Sem sw-inp, a caixa fica com o visual cru do navegador (só cresce, sem a borda e o foco do SWCore).

O que ele não faz

• Não tem opções de visual próprias: a aparência vem do sw-inp.
• Não tem eventos nem comandos de JavaScript próprios.
• A pessoa não consegue mais puxar o canto para aumentar a caixa (a alça some): a altura é sempre a do texto.