Los formularios suelen ser una pesadilla en los dispositivos móviles. Podemos hacer que el proceso sea lo más indoloro posible reaccionando al contexto. Los campos de entrada que esperan valores numéricos deben tener una interfaz de usuario numérica. Mostrar un teclado numérico en pantallas pequeñas es fácil en la mayoría de las plataformas, solo use un <input type="number">.
Este teclado numérico de botones grandes es fácil de usar y ayudará a evitar que los usuarios reboten en su formulario debido a la frustración. Sin embargo, type="number" no es apropiado para todos los números.
En (la mayoría) de las pantallas más grandes, las entradas numéricas vienen con un botón de incremento / decremento. Es una parte útil de la interfaz de usuario que obtenemos de forma gratuita de forma predeterminada. Sin embargo, hace que este tipo de entrada sea totalmente inapropiado para un número de tarjeta de crédito, por ejemplo.
La interfaz de usuario predeterminada para las entradas numéricas se parece a esto en todos los navegadores de escritorio
La especificación en sí lo deja claro.
El type=number state no es apropiado para la entrada que solo consta de números, pero no es estrictamente hablando un número. Por ejemplo, sería inapropiado para números de tarjetas de crédito o códigos postales de EE. UU. Una forma sencilla de determinar si usar type=number es considerar si tendría sentido que el control de entrada tenga una interfaz de caja de números (por ejemplo, con flechas “arriba” y “abajo”). Obtener un número de tarjeta de crédito incorrecto en 1 en el último dígito no es un error menor, es tan incorrecto como obtener todos los dígitos incorrectos. Por lo tanto, no tendría sentido que el usuario seleccionara un número de tarjeta de crédito usando los botones “arriba” y “abajo”. Cuando una interfaz de spinbox no es apropiada, type=text es probablemente la elección correcta (posiblemente con un pattern atributo).
Es fácil ocultar los botones arriba y abajo con CSS:
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}Es importante tener en cuenta que esta no es la única diferencia entre un número y la entrada de texto. ¡Definitivamente deberías seguir las especificaciones en este punto! Algunos navegadores más antiguos eliminarán los ceros iniciales para las entradas de números, lo que sería un gran problema para los códigos postales de EE. UU. El a menudo útil maxlength El atributo se ignora en las entradas numéricas.
¡si si si! ¡ finalmente puede morir con la muerte ardiente que se merece!
– Monica Dinculescu (@notwaldorf) 13 de marzo de 2018
¿Por qué a alguien le desagradaría una aportación tan útil?
La respuesta se reduce a la validación y al uso de la entrada para algo incorrecto. La entrada de número realiza la desinfección de entrada de forma predeterminada. Si un usuario ingresa algo que no es un número válido, el valor será igual a una cadena vacía, independientemente de lo que el usuario pueda ver en la pantalla.
Esta desinfección de entrada puede confundir a los desarrolladores y no hay forma de desactivarla. Si desea permitir una entrada que no sea un número válido, no use type="number".
Entrada de números en Chrome. Esta podría ser una entrada válida para su caso de uso, pero es ilegítima a los ojos de la entrada numérica.
var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""Es posible que esto no sea lo que esperaría intuitivamente. Sin embargo, si sigue las especificaciones y solo usa la entrada numérica para lo que está diseñado (números reales), este comportamiento no es problemático.
Alternativas de entrada de números
Solución iOS: use el atributo `pattern` en una entrada de texto
En dispositivos iOS, usando el pattern atributo con un valor de [0-9]* mostrará el teclado numérico. Esto solo funciona con este patrón exacto; no puede permitir ningún carácter adicional.
<label for="creditcard">credit card number:</label> <input pattern="[0-9]*" type="text" name="creditcard">
iOS con pattern atributo
Tenga en cuenta que un iPhone no permitirá que el usuario cambie el tipo de teclado cuando se muestra este teclado. Asegúrese de que estas sean las únicas claves que necesitan para completar la entrada correctamente.
Si desea que aparezca un teclado de teclas numéricas grandes en iOS, debe usar el pattern atributo incluso en entradas numéricas. De lo contrario, obtendrá botones pequeños y fáciles de usar:
Teclado iOS para <input type="number">
Una mejor solución: `inputmode`
inputmode ha sido una especificación WHATWG durante un par de años, y finalmente Chrome la implementó a partir de la versión 66:
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 66 | 95 | No | 79 | No |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 96 | 95 | 96 | 12,2-12,5 |
Para obtener el soporte más amplio posible, se puede combinar con el pattern atributo para iOS:
<label for="creditcard">credit card number:</label> <input inputmode="numeric" pattern="[0-9]*" type="text" name="creditcard">Esto brinda a los desarrolladores un control total de la interfaz de usuario móvil sin ningún equipaje adicional. Hace que la interfaz de usuario sea amigable con los dedos a la vez que es más versátil que la pattern atributo ya que podemos permitir cualquier carácter que queramos. Controla una cosa, y solo una cosa. inputmode es una gran solución para aquellos casos en los que no es apropiado usar type="number".
Algunas personas irían más lejos y abandonarían type="number" en conjunto una vez inputmode tiene mejor soporte. No estoy convencido de que sea prudente, pero type="number" puede ser problemático.
if (numberInput.validity.valueMissing) {
errorMessage.textContent = "field must not be empty"
}
Al contrario del ojo humano, el campo está vacío …
Si desea advertir explícitamente sobre entradas de números vacías, deberá usar:
if (numberInput.validity.valueMissing && !numberInput.validity.badInput) {
errorMessage.textContent = "field must not be empty"
}Según Google, los usuarios abandonan las compras con el doble de frecuencia en dispositivos móviles que en computadoras de escritorio. Las ventas en teléfonos representan solo un tercio de todas las compras en línea completadas. Claramente, la gente no tolera buscar a tientas formas mal diseñadas y pinchar en entradas pequeñas. La entrada de datos debe realizarse sin esfuerzo. Si bien la compatibilidad con el navegador es actualmente baja, solo estamos esperando en los navegadores móviles. El soporte de escritorio es en gran parte irrelevante. Los elementos de entrada introducidos por HTML5 son geniales, pero pasan por alto algunos casos extremos. Esto puede llenar algunos vacíos.