21.02.2025

Limite de Caracteres em HTML: Input e JavaScript

Resposta Rápida

Para definir um limite de caracteres em HTML, use o atributo maxlength:

<input type="text" maxlength="100" />

Esse método simples e eficaz controla o número de caracteres que podem ser inseridos nos campos <input> e <textarea>, evitando que mais de 100 caracteres sejam digitados.

Adicionando Flexibilidade com JavaScript

Embora maxlength seja bastante útil, às vezes é necessária uma solução mais flexível. Nesse caso, o JavaScript vem ao auxílio:

document.getElementById('meuInput').addEventListener('input', function() {
  var maxLength = 100;
  if(this.value.length > maxLength) {
    this.value = this.value.substring(0, maxLength);
  }
});

Usando esse manipulador de eventos, podemos gerenciar a contagem de caracteres no campo de input, impedindo que o usuário exceda o limite estabelecido.

Reforçando com Validação do Lado do Servidor

A validação do lado do cliente é crucial, mas a segurança principal deve ser aplicada no lado do servidor:

if (strlen($_POST['meuInput']) > 100) {
  // Excedeu o limite de caracteres.
}

Verificações de comprimento no lado do servidor para os dados de entrada servem como uma garantia adicional de segurança e integridade da informação.

Exibindo um Contador de Caracteres: O Segredo da UX

Adicionar um contador de caracteres restantes melhora significativamente a interação do usuário:

<input type="text" id="meuInput" maxlength="100" />
<div id="contagemCaracteres">Caracteres restantes: 100</div>

<script>
  document.getElementById('meuInput').addEventListener('input', function() {
    const maxLength = 100;
    document.getElementById('contagemCaracteres').textContent = "Caracteres restantes: " + (maxLength - this.value.length);
  });
</script>

Essa abordagem permite que os usuários vejam em tempo real quantos caracteres ainda podem ser inseridos.

Vencendo a Loteria dos Navegadores

Para garantir a compatibilidade com todos os principais navegadores, use verificações integradas:

<input type="text" oninput="verificarComprimento(this)" maxlength="100" />

Esse código verifica a funcionalidade correta em vários navegadores como Chrome, Firefox, Safari e Edge, garantindo uma experiência de usuário consistente.

Acessibilidade Não É Brincadeira, Mas Fizemos Uma Brincadeira Mesmo Assim

Não se esqueça do suporte a leitores de tela e considere as necessidades de pessoas com deficiência:

<label for="meuInput">Sua mensagem (até 100 caracteres):</label>
<input type="text" id="meuInput" maxlength="100" aria-describedby="contagemCaracteres" />
<span id="contagemCaracteres" aria-live="polite">Caracteres restantes: 100</span>

As propriedades aria-describedby e aria-live ajudam a criar notificações acessíveis e amigáveis sobre a contagem de caracteres restantes.

Mantendo um Olho nos Dispositivos

É importante garantir que o contador de caracteres seja exibido corretamente em todos os tipos de dispositivos aplicando princípios de design responsivo:

#contagemCaracteres {
  font-size: 0.8em;
}

Ao utilizar estilos responsivos, seu projeto continua acessível e amigável em diversos dispositivos.

Visualização

Imagine um campo de entrada de texto como um pequeno canteiro de flores em um grande jardim:

[[ 🌼🌼🌱🌼🌼 ]]

O limite de caracteres determina o número máximo de "flores" que podem ser "plantadas":

Máximo de 5 flores: [[🌼🌼🌼🌼🌼]]
Máximo de 3 flores: [[🌼🌼🌼]]

Cada símbolo representa uma flor. Tentar exceder o limite pareceria assim:

Máximo de 3 flores: [[🌼🌼🌼🌻🌻]]

É necessário respeitar os limites estabelecidos para manter o campo de entrada organizado e limpo.

Segurança Inabalável com Validação do Lado do Servidor

Para proteção adicional contra sobrecarga de dados, utilize a validação do lado do servidor:

if (req.body.meuInput.length > 100) {
  // Rejeitar a solicitação com excesso de dados.
}

Esse método é semelhante a um mago branco guardando os dados e protegendo-os de interferências indesejadas.

Equilibrando Entre Design Elegante e Praticidade

Um limite de caracteres pode ser projetado para ser tão atraente quanto Brad Pitt, mesclando design elegante com funcionalidade.

Código, Assim Como Leite, Tem Data de Validade

As tecnologias continuam a evoluir, e às vezes o código se torna obsoleto mais rápido do que antecipamos. Portanto, atualizar e melhorar regularmente seus projetos para atender às demandas e padrões atuais é a chave para o sucesso.

Recursos Úteis

1. Atributo maxlength do HTML para input — um guia detalhado sobre como usar o atributo maxlength no W3Schools.
2. input: Elemento de entrada (formulários) - HTML — MDN Web Docs descreve minuciosamente o elemento <input>.
3. Definindo maxlength em HTML Textarea - Stack Overflow — uma discussão sobre como limitar caracteres em textarea no Stack Overflow.
4. Validação de Entrada | Iniciativa de Acessibilidade na Web (WAI) | W3C — W3C apresenta o guia para validação de formulários, incluindo o uso de maxlength.
5. Validação de Formulários HTML5 — SitePoint — um guia do SitePoint sobre validação de formulários HTML5.
6. HTML5Pattern — uma fonte para padrões de validação de formulários HTML5.
7. Tag HTML <input> — um guia extensivo do Quackit sobre como usar a tag <input> na criação de formulários.

Video

Navigation