HTML input type=number: min, max, step y validación | We.Inc
Prueba input type=number en directo: define min, max y step, lee valueAsNumber y cada indicador de validez, quita las flechas y descubre cuándo inputmode=numeric es mejor campo.
Usa input type="number" para cantidades reales como una edad, un precio o un recuento. min y max fijan el rango permitido, step fija el incremento (1 por defecto, o any para decimales libres), y valueAsNumber te da un número, o NaN cuando el campo está vacío. Para números de tarjeta y códigos postales usa type="text" con inputmode="numeric".
Atributos de un campo numérico
Atributo
Ejemplo
Efecto
min="0"
Los valores menores no pasan la validación (rangeUnderflow)
max="10"
Los valores mayores no pasan la validación (rangeOverflow)
step="0.01" or step="any"
1 por defecto; los valores fuera del paso fallan (stepMismatch)
Un campo vacío falla (valueMissing)
list="sizes"
Sugiere valores de un datalist
placeholder="e.g. 2"
Pista que se ve mientras está vacío, nunca una etiqueta
Los campos numéricos parecen sencillos, pero las reglas sobre pasos, valores vacíos y las flechas confunden a mucha gente. Define los atributos en el probador, escribe lo que quieras en el campo y mira cómo se actualizan el valor en bruto, el número interpretado y cada indicador de validez mientras escribes.
Introduce los valores de min, max y step. Deja una casilla vacía para quitar ese atributo.
Escribe en el campo de prueba o usa las teclas de flecha y los botones de incremento.
Lee value, valueAsNumber y los indicadores de validez en el panel de al lado.
Copia el HTML generado cuando el campo se comporte como quieres.
Acompaña siempre el campo con un elemento label visible; un placeholder desaparece en cuanto alguien escribe.
Lee valueAsNumber en lugar de interpretar value tú mismo, y comprueba si es NaN antes de usarlo.
Valida de nuevo en el servidor. Las comprobaciones del navegador ayudan a las personas, pero cualquiera puede enviar un formulario sin ellas.
Para importes, step="0.01" acepta céntimos; para decimales libres usa step="any".
No uses type="number" en campos como teléfonos, números de tarjeta y códigos postales, donde unas flechas no tienen sentido.
Preguntas frecuentes
¿Por qué mi input numérico rechaza 1.5?
El paso por defecto es 1, así que solo son válidos los números enteros salvo que la base del paso no sea un entero. Añade step="0.5", step="0.01" o step="any" para aceptar decimales.
¿Qué devuelve valueAsNumber con un campo vacío?
NaN. La propiedad value devuelve una cadena vacía en el mismo caso. También puedes asignar valueAsNumber para escribir un número de vuelta en el campo.
¿Cómo quito las flechas de un input numérico?
Pon appearance: textfield en el input. Las teclas de flecha arriba y abajo siguen cambiando el valor, porque appearance solo cambia el aspecto. WebKit y Blink también dibujan los botones de incremento mediante pseudoelementos, que el ejemplo de abajo oculta igualmente.
¿Uso type=number o inputmode=numeric?
Usa type="number" cuando el valor es una cantidad real y las flechas ayudan. Usa type="text" con inputmode="numeric" y un pattern para cadenas de dígitos como números de tarjeta o códigos postales, que son identificadores y no importes.
¿Un campo numérico vacío es válido?
Sí, salvo que tenga el atributo required. Un input numérico se considera válido cuando está vacío o contiene un único número válido.
Cómo funciona la validación
El navegador comprueba el campo contra min, max y step, y activa un indicador en el objeto validity por cada regla que incumple. El formulario no se envía mientras haya un indicador activo, y :invalid te permite dar estilo al campo.
Cuando el campo contiene texto que el navegador no puede convertir en número, validity.badInput pasa a true. Comprueba ese indicador, o si valueAsNumber es NaN, antes de fiarte de lo que lees; el probador muestra exactamente lo que informa tu navegador.
Accesibilidad y móvil
Un input numérico se expone a las tecnologías de apoyo como un spinbutton. Si subir y bajar el valor paso a paso no tiene utilidad, un campo de texto con inputmode="numeric" evita cambios accidentales con la rueda del ratón o las teclas de flecha.
Pregúntate si el valor es una cantidad a la que podrías sumar o restar. Si lo es, usa un campo numérico; si es un código que resulta tener dígitos, usa texto.
Qué campo para cada número
type=number comparado con un campo de texto numérico
Dato
Campo
Por qué
Cantidad, edad, invitados
type="number" min max
Una cantidad real; las flechas y la comprobación de rango ayudan
Campo de precio con paso decimal y estilo de error
Escribe 4.999 o un número negativo y el contorno se pone rojo, porque el valor incumple el paso o el mínimo.
Ocultar los botones de incremento
appearance: textfield quita las flechas; los pseudoelementos de WebKit cubren los navegadores que aún las dibujan. Las teclas de flecha siguen funcionando.
Campo solo de dígitos sin flechas
inputmode sugiere un teclado numérico, el pattern comprueba que haya cinco dígitos y los ceros a la izquierda se conservan.
Leer el número de forma segura en JavaScript
valueAsNumber evita interpretar cadenas, y la comprobación de validity detecta valores fuera de rango o fuera del paso.