Contador de caracteres Componentes

O que é

Sabe o campo de "Mensagem" ou "Descrição do produto" que só aceita um tanto de letras? O contador mostra, enquanto a pessoa digita, quantos caracteres ela já usou e quantos ainda cabem — "42/160" ou "Faltam 118 caracteres". Você só coloca sw-textlimit no campo e diz o limite em sw-textlimit-max.

Um JavaScript pequeno do núcleo cria um <span class="sw-textlimit-cnt"> logo depois do campo e atualiza o texto a cada tecla. Ele também coloca o maxlength no campo com o mesmo número, então o navegador não deixa digitar além do limite. A cor muda sozinha: normal → amarelo quando faltam 20% ou menos → vermelho se o texto já veio maior que o limite. Funciona em <textarea> e em <input>, no tema claro e no escuro.

Quando usar

• Mensagem de contato ou pedido de orçamento com tamanho máximo — a pessoa vê quanto ainda pode escrever.
• Título e descrição para Google/redes (título até 60, descrição até 160): o contador evita texto cortado.
• Bio de perfil, recado, depoimento — qualquer texto curto com limite.
• Painel admin: resumo de produto, chamada de banner, texto de SMS/WhatsApp.

Comece aqui

1. 1

   Coloque o SWCore na página (uma vez só, vale para todos os componentes): o CSS no <head> e o JS no fim do <body>. O contador precisa dos dois.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do <body> -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Coloque sw-textlimit no campo e o limite em sw-textlimit-max. Digite no campo abaixo e olhe o contador.

   Sua mensagem

   <div sw-fld>
     <label for="mensagem">Sua mensagem</label>
     <textarea sw-inp id="mensagem" sw-textlimit sw-textlimit-max="160"></textarea>
   </div>

3. 3

   Quer outro texto no contador? Use sw-textlimit-txt com as palavras-chave {count}, {max} e {remaining}.

   Descrição para o Google

   <div sw-fld>
     <label for="descricao">Descrição para o Google</label>
     <input sw-inp id="descricao" sw-textlimit sw-textlimit-max="160"
            sw-textlimit-txt="Faltam {remaining} caracteres">
   </div>

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>
    <label for="nome">Seu nome</label>
    <input sw-inp id="nome" name="nome">
  </div>
  <div sw-fld>
    <label for="msg">Mensagem</label>
    <textarea sw-inp id="msg" name="msg" sw-textlimit sw-textlimit-max="500"
              sw-textlimit-txt="Faltam {remaining} caracteres"></textarea>
  </div>
  <button type="submit" sw-btn="pri">Enviar mensagem</button>
</form>

<div sw-fld>
  <label for="seo-titulo">Título da página</label>
  <input sw-inp id="seo-titulo" name="seo_titulo" sw-textlimit sw-textlimit-max="60">
</div>
<div sw-fld>
  <label for="seo-desc">Descrição</label>
  <textarea sw-inp="p" id="seo-desc" name="seo_desc" sw-textlimit sw-textlimit-max="160"></textarea>
</div>

<div sw-fld>
  <label for="cartao">Mensagem do cartão</label>
  <textarea sw-inp id="cartao" sw-textlimit sw-textlimit-max="90"
            sw-textlimit-center sw-textlimit-txt="{count} de {max}"></textarea>
</div>

// O SWCore percebe sozinho HTML novo na página e liga o contador.
// Se você trocou o conteúdo de uma área inteira com innerHTML e o
// contador não apareceu, peça para ele olhar aquela área de novo:
area.innerHTML = '<textarea sw-textlimit sw-textlimit-max="200"></textarea>';
SW.reinit(area);

API (JavaScript)

Precisa de quê

• swcore.min.css — o visual do contador.
• swcore.min.js — cria e atualiza o contador.

Cuidados — erros comuns

• Esquecer o swcore.min.js: sem o JS o campo funciona, mas o contador não aparece.
• Escrever as palavras-chave com outra grafia ({total}, {restante}) — elas aparecem escritas do jeito que estão. As únicas que funcionam são {count}, {max} e {remaining}.
• Usar a mesma palavra-chave duas vezes na frase: só a primeira é trocada pelo número.
• Trocar o texto do campo por JavaScript (campo.value = "…") não atualiza o contador sozinho. Depois de mudar, dispare o evento: campo.dispatchEvent(new Event("input")).
• O sw-textlimit-center centraliza também o texto digitado. Se quiser só o contador no meio, use sw-textlimit-align="center".

O que ele não faz

• Ele conta caracteres, não palavras.
• O limite do navegador (maxlength) só impede a digitação. Texto que já veio preenchido no HTML ou foi colocado por JavaScript pode passar do limite — o contador fica vermelho, mas não corta. Confira o tamanho também no servidor.
• Mudar sw-textlimit-max depois que a página abriu não tem efeito: o limite é lido uma vez, quando o contador é criado.