En el escritorio no le das importancia, porque al final todo se introduce con un teclado físico, pero en cuando vas a introducir información en un dispositivo de dimensiones limitadas como un móvil, toda ayuda que recibas es muy importante.
Así, por ejemplo, si tus usuarios deben introducir una cantidad con números en un formulario, llegar hasta el teclado numérico desde el teclado virtual convencional no es directo precisamente (eso si el usuario sabe cómo hacerlo). Por ejemplo, en Android con GBoard (el teclado de Google que viene con muchos móviles) lo que tienes que hacer es esto:
Por ello, sería mucho mejor que para introducir una cantidad apareciese ya el teclado numérico activado. Y lo mismo con otros tipos de teclados especializados que podamos necesitar: para introducir direcciones web, emails o teléfonos, por ejemplo.
Una manera de conseguir en el móvil el teclado que nos interesa es utilizar las variantes especializadas del control <input> que existen en HTML, y que se establecen con el atributo type (por ejemplo, <input type="email"> o <input type="number">...)). Así, por ejemplo, si utilizamos la variante numérica del control de entrada de datos, se nos mostrará por defecto el tipo de teclado numérico. Pero también el propio control será diferente, porque tendrá unas flechitas para aumentar y disminuir la cantidad, y tendremos que establecer cuánto es ese intervalo con el atributo step. Algo similar ocurre con las variantes para emails, teléfonos, etc...
El problema de usar este tipo de controles es que quizá no queramos que varíen su aspecto, o la validación de datos que nos proporcionan por defecto no sea adecuada y nos interesa hacer otra más personalizada... Puede haber muchos motivos para querer utilizar un control input convencional de texto, pero al mismo tiempo desear que se muestre un teclado especializado que ayude a los usuarios a introducir mejor la información.
Para estos casos, HTML nos proporciona el atributo inputmode, que sirve precisamente para eso: indicarle al sistema operativo qué tipo de teclado para entrada de datos nos interesa obtener.
<input type="text" inputmode="tel" id="tlfn" name="tlfn" />
De este modo existen varios modos de entrada que podemos especificar, que muestran un teclado diferente:
El aspecto del teclado puede variar según el software de teclado que utilices. En iOS (iPhone, IPad) se usa el teclado nativo de Apple y también es diferente a las capturas mostradas. Yo he incluido las de GBoard en Android, que es el que yo uso.
text: el teclado convencional de propósito general, que no tiene especialización y está atado al idioma local. Por ejemplo en español ofrece la letra eñe y facilita las tildes al dejar pulsadas las vocales:
email: facilita la introducción de emails ofreciendo la arroba ya en el teclado y además sugiriendo en el teclado predictivo las direcciones de email del usuario que ya estén registradas en el sistema operativo. Fíjate en que la tecla de acción azul cambia de un retorno de carro a un tabulador para saltar al siguiente campo.
url: facilita la introducción de direcciones web, para lo cual incluye la barra inclinada (una letra necesaria y que no tienes normalmente a mano) y sugiere direcciones habituales en el teclado predictivo. En algunos teclados y en iOS te ofrece también los dominios de primer nivel más comunes (.com, .net, etc...) en una tecla dedicada (no se ve en esta captura).
search: para cuadros de búsqueda. En GBoard no hay diferencia con el teclado convencional pero en otros teclados y en iOS cambia el botón de acción por un icono con una lupa para dejarlo más claro.numeric, decimal: muestran un teclado numérico con el separador decimal para el idioma local y algunas teclas adicionales además de los números. Según el teclado que utilices puede que tenga el símbolo menos (-) o no.
tel: este es especialmente útil ya que está pensado para introducir números de teléfono. Muestra los números acompañados de las letras correspondientes (útil en países en los que se usan para definir números telefónicos con frases, como en EEUU), y las teclas de asterisco, dial y otros comandos telefónicos habituales.
none: no muestra teclado alguno cuando el usuario pulsa en el cuadro de texto. De hecho si ya está el teclado mostrado no lo oculta, pero si no hay teclado mostrado no lo muestra tampoco. Tiene una utilidad poco frecuente y sería para casos en los que la aplicación implementa su propio teclado (por ejemplo, el típico control de acceso que tiene unos botones con números para marcar un PIN).
Nota: es interesante conocer que este atributo es global. Es decir, aunque se suele aplicar a los controles <input>, en realidad se podría aplicar a cualquier elemento. Así, si el elemento se vuelve editable, podemos indicar qué tipo de teclado aparecerá para facilitar dicha edición. No es un uso muy común (ni muy útil en general, la verdad), pero ahí está.
Te dejo un ejemplo descargable (1KB) para que puedas probar cada uno de los tipos. Debes probarlos desde un navegador móvil ya que en escritorio no verás diferencia alguna.
¡Espero que te sea útil!
💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor
