20.02.2025

Limitando o Número de Caracteres em um Campo de Entrada: HTML

Resposta Rápida

Para limitar o número de caracteres em um campo de texto, utilize o atributo maxlength do elemento input:

<input type="text" maxlength="10">

Dessa forma, os usuários poderão inserir no máximo 10 caracteres — é simples e direto.

Maior Controle com JavaScript

Usar JavaScript permite um controle adicional sobre a entrada de dados. Manipuladores de eventos como onkeypress, onkeydown e onkeyup facilitam o rastreamento detalhado das ações dos usuários, oferecem feedback em tempo real e validam os dados.

Exemplo de uso do manipulador onkeypress:

<input type="text" id="entradaLimitada" onkeypress="limitarCaracteres(event)">
<script>
  function limitarCaracteres(event) {
    if (document.getElementById('entradaLimitada').value.length >= 10) {
      event.preventDefault(); // Desculpe, este caractere não pode ser inserido.
    }
  }
</script>

Esse código garante que o usuário não ultrapasse o limite de caracteres estabelecido.

Considerando Nuâncias com a Inserção de Texto

Se você confiar apenas no atributo maxlength, tenha cuidado: os usuários podem tentar colar texto que excede o limite. Para controlar tais situações, é necessário implementar uma validação no lado do cliente usando JavaScript:

document.getElementById('entradaLimitada').addEventListener('input', function() {
  const comprimentoMaximo = 10;
  if (this.value.length > comprimentoMaximo) {
    this.value = this.value.substring(0, comprimentoMaximo); // Cortando texto excessivo!
  }
});

Certifique-se de considerar a validação no lado do servidor também, uma vez que as restrições do lado do cliente podem ser contornadas.

Feedback Dinâmico para Melhor Conveniência da Interface do Usuário

Fornecer informações sobre o limite de caracteres é importante para o design da experiência do usuário (UX). Usando CSS, você pode visualizar a aproximação do limite e exibir uma mensagem de erro quando este for excedido. A atualização da contagem de caracteres atual pode ser implementada usando JavaScript:

document.getElementById('entradaLimitada').addEventListener('input', atualizarContagem);

function atualizarContagem() {
  const contagem = this.value.length;
  document.getElementById('contagemCaracteres').textContent = `Caracteres: ${contagem}/10`; // Contagem de caracteres atualiza instantaneamente.
}

<span id="contagemCaracteres">Caracteres: 0/10</span>

Visualização

Limitar o número de caracteres em um campo de texto pode ser visualizado como um estacionamento com um número limitado de vagas:

Estacionamento (🅿️): [Carro 1, Carro 2, Carro 3, ..., Carro X]

Vamos restringir o número de vagas para 5:

<input type="text" maxlength="5">

🅿️: [🚗, 🚗, 🚗, 🚗, 🚗]
# APENAS CINCO CARACTERES (carros) podem caber no campo de texto (estacionamento).

Visualização do limite:

|Número de Caracteres |Permitido|
|---------------------|---------|
|1                    |   ✔️   |
|3                    |   ✔️   |
|5                    |   ✔️   |
|6                    |   ❌   |

Se o número de caracteres exceder o limite de 5, uma mensagem aparecerá: Desculpe, o estacionamento está cheio! Novos caracteres (carros) não poderão entrar.

Dicas e Descrições para o Usuário

Instruções claras melhoram a acessibilidade e aprimoram as interações do usuário. Forneça dicas ou descrições ao lado do campo de entrada:

<label for="usuario">Nome de usuário (até 10 caracteres):</label>
<input type="text" id="usuario" maxlength="10" aria-describedby="ajudaUsuario">
<small id="ajudaUsuario">Não mais que 10 caracteres. Simples e claro!</small>

JavaScript Reutilizável para Otimização de Código

Em vez de colocar JavaScript em várias partes do código, é melhor criar uma função reutilizável. Passe o elemento e o limite máximo de caracteres para ela. Isso melhorará a legibilidade e manutenibilidade do código:

function imporLimiteMaximo(campo, maxCaracteres) {
    campo.value = campo.value.substring(0, maxCaracteres); // Cortando texto excessivo!
}

// Usando a função
const campoEntrada = document.getElementById('meuInput');
campoEntrada.addEventListener('input', () => imporLimiteMaximo(campoEntrada, 10));

Considerando Recursos para Usuários Móveis

Ao desenvolver com usuários móveis em mente, é essencial criar interfaces simples e responsivas. A interação desses usuários difere da interação em desktops, então uma interface adaptada é sempre valiosa.

Recursos Úteis

1. O atributo 'maxlength' em elementos input do W3Schools — uma descrição detalhada do atributo maxlength.
2. <input>: Elemento de entrada HTML (Entrada de formulário) - HTML | MDN — um estudo aprofundado sobre tipos de entrada HTML5 e seus atributos.
3. Elemento: evento input - APIs da Web | MDN — explicação dos eventos de entrada em JavaScript.
4. Restrições de validação - HTML | MDN — usando técnicas de validação de formulário em HTML5.
5. Usando Debouncing e Throttling com exemplos | CSS-Tricks — otimizando o manuseio de eventos de entrada em JavaScript.
6. Padrão de atributo no elemento input do HTML - W3Schools — usando expressões regulares para validação de entrada.
7. GitHub - RobinHerbots/Inputmask: Plugin de Máscara de Entrada — plugin jQuery para configurar máscaras de entrada.
8. input - Definindo maxlength para HTML Textarea - Stack Overflow — discussão sobre problemas de textarea na comunidade Stack Overflow.

Video

Navigation