JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Forzar distintos tipos de teclado en navegadores móviles al introducir datos

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:

Muestra cómo cambiar del teclado convencional al numérico en GBoard en Android

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:

Teclado de texto general

  • 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.

Teclado para email

  • 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).

Teclado para direcciones web

  • 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.

Teclado numérico

  • 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.

Teclado para números de teléfono

  • 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!

José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Agregar comentario