28.03.2025

Obtendo o Valor "Bruto" de um Campo de Entrada do Tipo Número

Resposta Rápida

Para extrair o valor de um campo <input type="number">, use a propriedade value neste código:

let valorBruto = document.querySelector('input[type="number"]').value;

Mas lembre-se: o navegador remove todos os caracteres não numéricos, transformando-os em uma string vazia. Se você precisar preservar todos os caracteres, incluindo aqueles que não são adequados para o formato numérico, é preferível usar <input type="text"> e depois converter os dados adquiridos em um número.

Recursos de Limpeza de Entrada e Comportamento do Navegador

O navegador limpa automaticamente os dados no campo de entrada de acordo com as regras do WHATWG e do W3C: se os caracteres no campo <input type="number"> não forem numéricos, eles são substituídos por uma string vazia.

Extraindo Manualmente Valores de <input type="text">

Se você precisar preservar toda a gama de caracteres, incluindo os não numéricos, use <input type="text">:

let entradaBruta = document.querySelector('input[type="text"]').value;
let numeroParsed = parseFloat(entradaBruta); // Converte a string em número

Validando Valores de Entrada? Com certeza!

Você pode verificar a validade do valor inserido usando a propriedade inputElement.validity.valid:

let entradaNumero = document.querySelector('input[type="number"]');
let ehValido = entradaNumero.validity.valid;

Forneça imediatamente um feedback visual ao usuário usando a pseudo-classe CSS :invalid:

input:invalid {
  border: 2px solid red; // A cor vermelha indica um erro
}

Destacando, Monitorando e Respondendo

O comando document.execCommand("SelectAll") destaca todo o texto no campo, enquanto window.getSelection().toString() permite que você obtenha a seleção atual:

input.addEventListener('keyup', (evento) => {
  console.log("Tecla pressionada:", evento.key); // Monitore cuidadosamente a entrada do usuário
});

Limitações dos Campos de Entrada Numéricos

Para definir limites para a entrada numérica, use os atributos min e max:

<input type="number" min="1" max="10">

Não se esqueça de garantir que seu navegador suporte a API HTML5 para validação para usar a propriedade validity.

Destacando, Transformando e Formatando

O método select() permite destacar o texto no campo de entrada. Converta os dados textuais obtidos em formato numérico tratando o evento de desfoque:

input.onblur = () => {
   input.value = parseFloat(input.value) || '';
};

Visualização

Compare <input type="number"> a um scanner de preços em um supermercado:

Valor original: [1, 2, ., 3, e, 3]    // Que variedade de caracteres no campo de entrada!
Resultado do scanner: 12.33$           // Mas o scanner filtra e aceita apenas números.

Como esse scanner, a propriedade .valueAsNumber considera apenas valores numéricos, filtrando tudo o que é diferente.

Expandindo suas Habilidades de Entrada

Lidando com Entradas Complexas do Usuário

Se você espera entradas na forma de letras, números e caracteres especiais, use métodos de análise de strings ou bibliotecas especializadas.

Feedback Contínuo

Para garantir interatividade em formulários e verificações de validação em tempo hábil, é sensato configurar ouvintes de eventos para os elementos de entrada.

Compatibilidade Universal

Teste os formulários em vários navegadores e dispositivos — o tratamento de dados pode se comportar de forma diferente em diferentes ambientes.

Recursos Úteis

1. <input type="number"> - HTML: HyperText Markup Language | MDN — informações sobre <input type="number"> no MDN.
2. html - Existe um tipo de entrada de ponto flutuante no HTML5? - Stack Overflow — discussão no Stack Overflow sobre números decimais em <input>.
3. O atributo type do input HTML — material do W3Schools sobre atributos de <input> no HTML.
4. Aprenda Formulários | web.dev — guia do web.dev sobre como criar formulários de qualidade.
5. Padrão HTML — padrão "vivo" do WHATWG descrevendo <input>.
6. Animação | CSS-Tricks - CSS-Tricks — informações sobre animações CSS no CSS-Tricks.
7. Propriedades e Métodos de Formulários — guia do JavaScript.info sobre como trabalhar com formulários e seus elementos usando JavaScript.

Video

Navigation