Input type=number no HTML: min, max, step e validação | We.Inc
Teste o input type=number ao vivo: defina min, max e step, leia valueAsNumber e cada flag de validity, remova as setas e saiba quando inputmode=numeric é o campo mais adequado.
Use input type="number" para quantidades reais, como uma idade, um preço ou uma contagem. min e max definem o intervalo permitido, step define o incremento (1 por padrão, ou any para decimais livres) e valueAsNumber devolve um número, ou NaN quando o campo está vazio. Para números de cartão e CEPs, use type="text" com inputmode="numeric".
Atributos de um campo numérico
Atributo
Exemplo
Efeito
min="0"
Valores menores falham na validação (rangeUnderflow)
max="10"
Valores maiores falham na validação (rangeOverflow)
step="0.01" or step="any"
Padrão 1; valores fora do passo falham (stepMismatch)
Um campo vazio falha (valueMissing)
list="sizes"
Sugere valores a partir de um datalist
placeholder="e.g. 2"
Dica exibida enquanto está vazio, nunca um rótulo
Campos numéricos parecem simples, mas as regras sobre passos, valores vazios e as setas confundem muita gente. Defina os atributos no testador, digite qualquer coisa no campo e veja o valor bruto, o número interpretado e cada flag de validity se atualizarem enquanto você digita.
Digite os valores de min, max e step. Deixe uma caixa vazia para remover aquele atributo.
Digite no campo de teste ou use as setas do teclado e os botões de incremento.
Leia value, valueAsNumber e as flags de validity no painel ao lado.
Copie o HTML gerado quando o campo se comportar do jeito que você quer.
Sempre acompanhe o campo de um elemento label visível; um placeholder some assim que alguém digita.
Leia valueAsNumber em vez de converter value por conta própria e verifique se é NaN antes de usar.
Valide de novo no servidor. As checagens do navegador ajudam as pessoas, mas qualquer um pode enviar um formulário sem elas.
Para dinheiro, step="0.01" aceita centavos; para decimais livres, use step="any".
Não use type="number" em campos como telefone, número de cartão e CEP, em que as setas não fazem sentido.
Perguntas frequentes
Por que o meu input numérico rejeita 1.5?
O step padrão é 1, então só números inteiros são válidos, a menos que a base do passo não seja inteira. Adicione step="0.5", step="0.01" ou step="any" para aceitar decimais.
O que valueAsNumber devolve para um campo vazio?
NaN. A propriedade value devolve uma string vazia no mesmo caso. Você também pode atribuir valueAsNumber para escrever um número de volta no campo.
Como removo as setas de um input numérico?
Defina appearance: textfield no input. As setas para cima e para baixo do teclado continuam mudando o valor, porque appearance só muda a aparência. WebKit e Blink também desenham os botões de incremento por meio de pseudo-elementos, que o exemplo abaixo também esconde.
Devo usar type=number ou inputmode=numeric?
Use type="number" quando o valor for uma quantidade real e as setas ajudarem. Use type="text" com inputmode="numeric" e um pattern para sequências de dígitos como números de cartão ou códigos postais, que são identificadores, não quantias.
Um campo numérico vazio é válido?
Sim, a menos que tenha o atributo required. Um input numérico é considerado válido quando está vazio ou contém um único número válido.
Como a validação funciona
O navegador confere o campo contra min, max e step e marca uma flag no objeto validity para cada regra violada. O formulário não é enviado enquanto houver uma flag marcada, e :invalid permite estilizar o campo.
Quando o campo contém um texto que o navegador não consegue transformar em número, validity.badInput passa a ser true. Verifique essa flag, ou se valueAsNumber é NaN, antes de confiar no que leu; o testador mostra exatamente o que o seu navegador informa.
Acessibilidade e celular
Um input numérico é apresentado às tecnologias assistivas como um spinbutton. Se aumentar e diminuir o valor não for útil, um campo de texto com inputmode="numeric" evita mudanças acidentais pela roda do mouse ou pelas setas do teclado.
Pergunte-se se o valor é uma quantia que faz sentido somar ou subtrair. Se for, use um campo numérico; se for um código que por acaso tem dígitos, use texto.
Qual campo para qual número
type=number comparado com um campo de texto numérico
Dado
Campo
Por quê
Quantidade, idade, convidados
type="number" min max
Uma quantia real; as setas e as checagens de intervalo ajudam
Campo de preço com passo decimal e estilo de inválido
Digite 4.999 ou um número negativo e o contorno fica vermelho, porque o valor viola o passo ou o mínimo.
Esconder os botões de incremento
appearance: textfield remove as setas; os pseudo-elementos do WebKit cobrem os navegadores que ainda as desenham. As setas do teclado continuam funcionando.
Campo só de dígitos sem setas
inputmode sugere um teclado numérico, o pattern confere cinco dígitos e os zeros à esquerda ficam intactos.
Ler o número com segurança em JavaScript
valueAsNumber evita converter strings, e a checagem de validity pega valores fora do intervalo ou fora do passo.