Como permitir apenas números no input HTML?

Validando entrada de números em campos HTML: apenas dígitos e vírgula manual

Em muitas aplicações web, é crucial garantir que os usuários insiram apenas dados válidos em campos de formulário. Um cenário comum é a necessidade de aceitar somente números, eventualmente com uma vírgula como separador decimal, mas sem formatação automática. Este artigo demonstra como implementar essa validação usando JavaScript, evitando máscaras e garantindo controle total sobre a entrada do usuário.

A abordagem comum de usar máscaras, como a mask(000.000,00, { reverse: true }) mencionada, pode ser restritiva e gerar uma experiência de usuário pouco intuitiva. O usuário pode não entender o porquê de sua entrada ser formatada automaticamente ou enfrentar dificuldades ao tentar inserir valores fora do padrão predefinido pela máscara.

A solução proposta foca na validação direta da entrada através de JavaScript, permitindo a digitação livre de números, mas rejeitando qualquer caractere não numérico, exceto a vírgula, e só se inserida manualmente pelo usuário.

O código JavaScript:

const inputNumero = document.getElementById('meuInput'); // Substitua 'meuInput' pelo ID do seu input

inputNumero.addEventListener('input', function(event) {
  let valor = this.value;
  let novoValor = '';

  for (let i = 0; i < valor.length; i++) {
    const caractere = valor[i];
    if (caractere >= '0' && caractere <= '9' || caractere === ',') {
      novoValor += caractere;
    }
  }

  // Permite apenas uma vírgula
  if (novoValor.indexOf(',') !== -1 && novoValor.lastIndexOf(',') !== novoValor.indexOf(',')) {
    novoValor = novoValor.substring(0, novoValor.lastIndexOf(','));
  }

  this.value = novoValor;
});

Explicação do código:

1. getElementById: Seleciona o elemento input HTML pelo seu ID. Certifique-se de substituir 'meuInput' pelo ID real do seu campo de input.

2. addEventListener: Adiciona um listener de evento input, que é acionado sempre que o valor do input muda.

3. Loop for: Itera sobre cada caractere inserido pelo usuário.

4. Condição if: Verifica se o caractere é um dígito (de '0' a '9') ou uma vírgula. Somente esses caracteres são adicionados à variável novoValor.

5. Controle da vírgula: O código verifica se já existe uma vírgula em novoValor. Se existir mais de uma, apenas a primeira é mantida. Isso impede a inserção de múltiplas vírgulas.

6. this.value = novoValor: Atualiza o valor do input com o valor validado.

HTML:

Lembre-se de incluir o script JavaScript na sua página HTML, preferencialmente antes do fechamento da tag <body> ou em um arquivo separado incluído via <script src="seu-script.js"></script>.

<!DOCTYPE html>
<html>
<head>
  <title>Validação de Número</title>
</head>
<body>
  <input type="text" id="meuInput" placeholder="Digite um número">
  <script>
    // Código JavaScript aqui ou incluído de um arquivo externo
  </script>
</body>
</html>

Este método oferece uma solução mais robusta e amigável ao usuário, permitindo a entrada livre de números enquanto garante a validação desejada, sem as limitações impostas por máscaras pré-definidas. A flexibilidade deste script permite adaptações para outros cenários de validação, como a restrição do número de casas decimais, por exemplo. Lembre-se de adaptar o código ao seu contexto específico.