21.02.2025

Restringindo a Entrada de Números Negativos em Input HTML

Resposta Rápida

Para que o <input type="number"> aceite apenas números positivos, use o atributo min com o valor 0. Em seguida, adicione um listener de evento JavaScript para bloquear a tecla "menos".

Exemplo de Código:

<input type="number" min="0" onkeydown="return event.key !== '-';">

Neste exemplo, o valor mínimo permitido é zero, e a entrada de números negativos é bloqueada por meio do JavaScript.

Garantindo Entrada de Números Positivos

Para converter automaticamente valores negativos inseridos em positivos, use o manipulador de evento oninput com a função Math.abs:

<input type="number" min="0" oninput="this.value = Math.abs(this.value)">

Essa abordagem facilita a interação do usuário com o formulário, prevenindo erros devido à entrada de números negativos.

Aceitando Apenas Caracteres Numéricos

Limite a entrada a dígitos usando o evento onkeypress. Isso permitirá controle sobre teclas funcionais, como Backspace ou as teclas de seta:

<input type="number" onkeypress="return (event.charCode >= 48 && event.charCode <= 57) || event.charCode === 8 || event.charCode === 0">

Com esse código, a entrada de dados numéricos tanto do teclado principal quanto do Numpad será segura.

Bloqueando Teclas Irrelevantes

Amplie o método onkeypress ao adicionar um manipulador onkeydown para evitar o uso de teclas inadequadas:

<input type="number" onkeydown="return (event.keyCode > 47 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106) || event.keyCode === 8">

Esse método garante a integridade dos dados, impedindo a inserção acidental de caracteres inadequados.

Visualização

Restringir a entrada de números negativos no campo <input type="number"> pode ser ilustrado ao compará-lo a restrições de altura para brinquedos em parques de diversões:

Seu campo de entrada numérica é como um brinquedo:

🎢🚫🔽 **ENTRADA NEGATIVA NÃO PERMITIDA!** 🚫🔽🎢

Configuração do campo para que números negativos não sejam aceitos:

<input type="number" min="0" oninput="this.value = Math.max(this.value, 0)">

Veja o resultado:

Antes: [🎢, -2, 3, -1, 4]
Depois:   [🎢,  0, 3,  0, 4]

✨ Agora, o campo input aceita apenas valores positivos e zero, rejeitando todos os números negativos! ✨

Usando validity.valid para Validação Apropriada

Para lidar com a correção de entrada de valores negativos, pode-se utilizar validity.valid ou limpar o campo value definindo-o como uma string vazia '' em caso de dados inválidos:

<input type="number" min="0" oninput="this.validity.valid||(this.value='');">

Graças à validação de formulários HTML5, o campo de entrada retorna o último valor válido ou se limpa quando informações inválidas são inseridas.

Reforçando Restrições de Entrada

Para evitar colar valores negativos ou mudar o campo usando botões, siga estas etapas:

1. Desabilite as alterações de valor por meio do mouse ou de botões:

   <input type="number" min="0" onwheel="this.blur()" onclick="this.blur()">

2. Defina mensagens de validação personalizadas para aprimorar a experiência do usuário:

   var numberInput = document.querySelector('input[type="number"]');
   numberInput.oninvalid = function(ev){
    ev.target.setCustomValidity('Por favor, insira um número positivo.');
   };
   numberInput.oninput = function(ev){
    ev.target.setCustomValidity('');
   };

Dessa forma, o formulário se torna mais amigável, mantendo restrições rigorosas de entrada de dados.

Foco em Acessibilidade e Desempenho

É importante manter a acessibilidade e o desempenho ao trabalhar com restrições em campos de entrada. Teste seus campos de entrada em diversos dispositivos, incluindo aqueles que utilizam leitores de tela e telas sensíveis ao toque, para atender às necessidades de todos os usuários.

Forneça indicadores de erro claros e adicione textos alternativos para programas de leitura de tela usando labels aria e outros princípios de acessibilidade.

Recursos Úteis

1. <input type="number"> - HTML: HyperText Markup Language | MDN — Visão geral do elemento input type="number", seus atributos e comportamentos.
2. Validação de formulários do lado do cliente - Aprenda desenvolvimento web | MDN — Material sobre validação de formulários do lado do cliente com exemplos usando HTML e JavaScript.
3. Atributo min de input HTML — Descrição do atributo min para limitar valores mínimos de entrada numérica.
4. Evento oninput — Informações sobre o evento oninput em JavaScript para rastrear mudanças em campos de entrada.
5. Validação de restrições - HTML: HyperText Markup Language | MDN — Guia para validação de restrições em HTML, útil para bloquear entradas de dados errôneas.
6. WebAIM: Criando Formulários Acessíveis - Controles de Formulário Acessíveis — Diretrizes para criar formulários e campos de entrada acessíveis.
7. Estilizando Entradas de Intervalo Compatíveis com Vários Navegadores com CSS | CSS-Tricks — Guia sobre como estilizar elementos de formulário usando CSS, aplicável a campos do tipo número.

Video

Navigation