Cuando estamos haciendo un formulario y pensamos en móvil, nos gusta pensar que el propio teléfono decidirá bien qué configuración de teclado escoger. Pero si no nos fiamos una buena manera es usar inputmode y así evitaremos errores innecesarios de los usuarios.

Se trata de un parámetro para los inputs que predefine los teclado a mostrar. Me parece muy interesante ya que adecua al usuario una característica muy específica de un momento que afecta mucho a la experiencia del usuario. Creo que es muy importante implementar este tipo de mejoras, ya que luego es lo que diferencia tu proyecto web de los otros.

A continuación, os propongo ejemplos y códigos de cada uno de ellos:

Los ejemplos se han puesto para que se pueda ver desde un dispositivo móvil

Inputmode none

Teclado alfanumérico por defecto. A veces nos puede interesar para forzar a que no muestre ningún teclado o para seleccionar unos input con teclados por defecto.

Código:

<input type="text" inputmode="none" />

Ejemplo:

Inputmode numeric

Es un teclado numérico con símbolos para poner monedas, decimales, funciones, operaciones…

Código:

<input type="number" inputmode="numeric" />

Ejemplo:

Inputmode decimal

Es un teclado exclusivamente numérico, para dirigir muy bien al usuario y ayudarle a que entienda el contenido que se espera de tu interacción.

Código:

<input type="number" inputmode="decimal" />

Ejemplo:

inputmode decimal

Input tel

Es un teclado para escribir números de teléfono.

Código:

<input type="tel" inputmode="tel" />

Ejemplo:

inputmode tel

Input url

Es un teclado orientado a escribir direcciones de web.

Código:

<input type="url" inputmode="url" />

Ejemplo:

inputmode url

Input email

Es un teclado orientado a escribit direcciones de emails

Código:

<input type="email" inputmode="email" />

Ejemplo:

inputmode email

Input search

Es un teclado para campos de búsqueda

Código:

<input type="text" inputmode="search" />

Ejemplo:

inputmode search

En cuanto a compatibilidad, caniuse no ofrece muy buenas noticias. Evidentemente es una propiedad que está pensada para móviles, así que no sé si tiene mucho sentido para ordenadores. A no ser que se empiece a usar esta propiedad para teclados digitales configurables, cómo el macbook con Touch Bar. Plantea interesantes funcionalidades que no estaría de más que fuéramos implementando poco a poco mientras avanzamos hacia un futuro mejor a nivel de maquetación.

Categorías: Android, HTML, iOS
Si necesitas una url corta puede usar: codygo.es/2173

Deja un comentario