Podrías alcanzar <input type="number"> cuando estás, ya sabes, tratando de 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 es uno (como el número de una tarjeta de crédito tiene espacios), porque en realidad es solo una cadena de números. Aún más importante, hay una variedad de problemas con los lectores de pantalla.
Hanna Laakso documenta los problemas de GOV.UK. Esto es en lo que aterrizaron:
<input type="text" inputmode="numeric" pattern="[0-9]*">El inputmode atributo es bastante bueno, y tenemos una inmersión profunda en eso.
Phil Nash llegó a (casi) la misma conclusión exacta 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"
id="token"
inputmode="numeric"
pattern="[0-9]*"
autocomplete="one-time-code"
/>Ese último atributo es interesante y nuevo para mí. Significa que obtienes esta experiencia súper útil adicional en los navegadores que la admiten:
Hay otros valores de autocompletar, como escribe Phil:
Hay muchos valores de autocompletar disponibles, que abarcan 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, current-password.
Los navegadores y administradores de contraseñas tienen muy buena heurística para encontrar formularios de inicio de sesión en páginas web, pero username y current-password los valores lo hacen muy obvio.