Qué usar en lugar de entradas numéricas

Podrías recurrir a él input type="number"cuando, ya sabes, estás intentando recopilar un número en un formulario. Pero tiene todo tipo de problemas. Por un lado, a veces lo que quieres parece un número, pero no lo es (como cuando un número de tarjeta de crédito tiene espacios), porque en realidad es solo una cadena de números. Aún más importante es que existen diversos problemas con el lector de pantalla.

Hanna Laakso documenta los problemas para GOV.UK. Esto es en lo que aterrizaron:

input type="text" inputmode="numeric" pattern="[0-9]*"

El inputmodeatributo es bastante bueno y profundizaremos en ello.

Phil Nash llegó (casi) exactamente a la misma conclusión y escribió en su blog sobre cómo mejorar la experiencia de una entrada de código de autenticación de dos factores en el blog de Twilio:

input  type="text"  name="token"   inputmode="numeric"  pattern="[0-9]*"  autocomplete="one-time-code"/

Ese último atributo es interesante y nuevo para mí. Significa que obtendrás esta experiencia súper útil en los navegadores que la admiten:

Hay otros valores de autocompletar, como escribe Phil:

Hay muchos valores de autocompletar disponibles, que cubren todo, desde nombres y direcciones hasta tarjetas de crédito y otros detalles de la cuenta. Para registrarse e iniciar sesión, hay algunos valores de autocompletar que se destacan como sugerencias útiles: username, email, new-password. Los navegadores y administradores de contraseñas tienen muy buenas heurísticas para encontrar formularios de inicio de sesión en páginas web, pero el uso de los valores y lo hace muy obvio.current-password

usernamecurrent-password