El atributo inputmode proporciona una pista a los navegadores para saber qué teclado mostrar cuando un usuario ha seleccionado un input o un textarea. Inputmode no cambia la forma en la que el navegador muestra el campo de texto.
<input type="text" inputmode="" />
<textarea inputmode="" />
None
<input type="text" inputmode="none" />
Lo más seguro es que no queramos ningún tipo de teclado especial en pantalla. Por ello, none está diseñado para contenido que genera su propio control de teclado.
Numeric
<input type="text" inputmode="numeric" />
numeric es uno de los inputmode más comunes ya que facilita la entrada de PIN, códigos postales, números de tarjetas de crédito, etc.
Utilizar el inputmode numeric con un tipo de input text puede tener más sentido que utilizar el type="number", ya que, inputmode="numeric" se puede utilizar con maxlength, minlength, patter... por lo que es más versátil para algunos casos.
La utilización del tipo teléfono es una alternativa para sacar el teclado numérico, pero no es la forma semántica de hacerlo. La forma correcta podría ser la utilización del pattern="\d*".
Tel
<input type="text" inputmode="tel" />
El atributo inputmode tel mostrará un teclado telefónico, que contendrá teclas para los dígitos del 0 al 9, el carácter almohadilla y el carácter asteriscos. Además, obtendremos etiquetas mnemotécnicas alfanuméricas.
Decimal
<input type="text" inputmode="decimal" />
El inputmode decimal es muy similar al teclado tel, pero tiene un cambio sutil en IOS donde se reemplaza +*# por un punto (.). En Android, el teclado será el numérico.
<input type="text" inputmode="email" />
El inputmode email es un teclado muy útil para emails y, para ingresar un nombre de usuario de Twitter, Instagram o Facebook, ya que @ es un carácter utilizado para identificar a los usuarios en estas redes sociales.
Otro caso por el que podría ser útil el inputmode email sería para tener validaciones de correo electrónicos custom, sin la entrada en juego de las validaciones automáticas de los navegadores.
URL
<input type="text" inputmode="url" />
El inputmode url proporciona un atajo de teclado para que los usuarios agreguen los dominios de nivel superior (por ejemplo, .com, .net, .org, .cat, .museum...), así como los puntos (.) y las barras diagonales (/).
Search
<input type="text" inputmode="search" />
Utilizando el inputmode search se mostrará una tecla Ir azul en IOS y una tecla Enter verde en Android.
Si deseamos mostrar buscar en lugar de Ir en IOS y un icono de lupa en Android, utilizaremos type="searchen".
