El Atributo INPUTMODE

El atributo inputmode en HTML permite sugerir el tipo de teclado virtual que debe mostrarse en dispositivos móviles o pantallas táctiles al interactuar con un campo de entrada. Esto mejora la experiencia del usuario al adaptar la entrada según el contexto, sin afectar la validación de datos. Aquí una guía completa:

¿Qué es inputmode?

Propósito: Indica al navegador qué tipo de teclado mostrar para campos <input> o <textarea>.

No valida datos: Solo afecta la interfaz de entrada, no restringe el tipo de datos ingresados.

Diferencia con type:

• type define el tipo de dato y puede validarlo (ej: type="email").

• inputmode sugiere un teclado específico, pero permite cualquier texto.

Valores de inputmode

Valor	Teclado Sugerido	Ejemplo de Uso
none	Sin teclado (útil para inputs personalizados).	Campos manejados por JavaScript.
text	Teclado estándar (predeterminado).	Nombres, comentarios.
decimal	Teclado numérico con decimales.	Precios (ej: 19.99).
numeric	Teclado numérico sin decimales.	Códigos PIN, números enteros.
tel	Teclado para números telefónicos.	Campos de teléfono.
search	Teclado con botón de búsqueda.	Barras de búsqueda.
email	Teclado con @ y dominio.	Correos electrónicos.
url	Teclado con barra (/), .com, etc.	URLs.

Sintaxis Básica

<input type="text" inputmode="numeric" placeholder="Ingresa tu PIN">
<textarea inputmode="email" placeholder="Correo electrónico"></textarea>

Ejemplos Prácticos

Ejemplo 1: Entrada numérica para un código PIN

<label for="pin">Código PIN:</label>
<input 
  type="text" 
  id="pin" 
  inputmode="numeric" 
  pattern="[0-9]*" 
  maxlength="4"
>

• Teclado: Muestra un teclado numérico en móviles.

• Validación: pattern="[0-9]*" restringe a números (solo dígitos).

Ejemplo 2: Entrada de precio con decimales

<label for="precio">Precio:</label>
<input 
  type="text" 
  id="precio" 
  inputmode="decimal" 
  pattern="[0-9]+([.,][0-9]+)?" 
  placeholder="Ej: 29.99"
>

Teclado: Muestra teclado numérico con punto o coma decimal.

Ejemplo 3: Campo de búsqueda optimizado

<input 
  type="search" 
  inputmode="search" 
  placeholder="Buscar productos..."
>

Teclado: Incluye un botón de búsqueda en algunos dispositivos.

Combinación con type y pattern

Para mejorar la experiencia, combina inputmode con:

• type: Define el tipo de dato esperado.

• pattern: Valida el formato usando expresiones regulares.

Ejemplo:

<input 
  type="tel" 
  inputmode="tel" 
  pattern="[0-9]{10}" 
  placeholder="Número de teléfono"
>

Compatibilidad en Navegadores

• Soportado en: Chrome, Firefox, Edge, Safari (iOS/Android) y navegadores móviles modernos.

• Limitaciones:

  • Algunos navegadores en escritorio ignoran inputmode.

  • En iOS, decimal y numeric pueden mostrar el mismo teclado.

Buenas Prácticas

1. Usa inputmode junto a type y pattern: Mejora la usabilidad y validación.

2. Evita none en campos de texto: Podría confundir al usuario al ocultar el teclado.

3. Prueba en dispositivos móviles: Verifica que el teclado sugerido sea el adecuado.

Errores Comunes

Error 1: Confundir inputmode con type

<!-- Incorrecto: inputmode no valida el correo -->
<input type="text" inputmode="email">

<!-- Correcto -->
<input type="email" inputmode="email">

Error 2: Usar inputmode="numeric" para decimales

<!-- Incorrecto: "numeric" no incluye punto decimal -->
<input inputmode="numeric" placeholder="Precio">

<!-- Correcto -->
<input inputmode="decimal" placeholder="Precio">

Conclusión

El atributo inputmode es una herramienta poderosa para optimizar la entrada de datos en dispositivos móviles. Al sugerir teclados específicos, reduces errores y aceleras la interacción del usuario. ¡Implántalo en formularios críticos para una experiencia fluida!