El Atributo ENTERKEYHINT

Mejora la experiencia del usuario en dispositivos móviles al sugerir la acción que realizará la tecla "Enter" en teclados virtuales.

El atributo enterkeyhint mejora la experiencia del usuario en dispositivos móviles al sugerir la acción que realizará la tecla "Enter" en teclados virtuales. Este atributo es útil para formularios y aplicaciones web, ya que personaliza el texto o ícono de la tecla según el contexto. Aquí un tutorial completo:

¿Qué es `enterkeyhint`?

Propósito: Indica el comportamiento esperado de la tecla "Enter" en campos de entrada (<input>, <textarea>), adaptando el teclado virtual a la acción relevante (ej: "Buscar", "Enviar").
Valores admitidos:
- enter (predeterminado): Muestra "Intro" o una flecha.
- done: Muestra "Listo".
- go: Muestra "Ir".
- next: Muestra "Siguiente".
- previous: Muestra "Anterior".
- search: Muestra "Buscar".
- send: Muestra "Enviar".

Sintaxis y Uso

Aplica enterkeyhint directamente en el elemento de entrada:

<input type="text" enterkeyhint="search" placeholder="Buscar...">
<textarea enterkeyhint="send" placeholder="Escribe un mensaje..."></textarea>

Valores y Casos de Uso

Valor	Escenario Típico	Ejemplo
`search`	Campos de búsqueda.	`<input type="search" enterkeyhint="search">`
`send`	Chats o formularios de mensajes.	`<textarea enterkeyhint="send"></textarea>`
`next`	Formularios multipaso para avanzar al siguiente campo.	`<input enterkeyhint="next">`
`done`	Último campo de un formulario.	`<input enterkeyhint="done">`
`go`	Acciones de navegación (ej: inicio de sesión).	`<input enterkeyhint="go">`

Ejemplos Prácticos

Ejemplo 1: Formulario de Búsqueda

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

La tecla "Enter" mostrará "Buscar" en el teclado virtual.

Ejemplo 2: Chat en Tiempo Real

<textarea 
  enterkeyhint="send" 
  placeholder="Escribe un mensaje..."
></textarea>

La tecla "Enter" mostrará "Enviar", ideal para enviar mensajes.

Ejemplo 3: Formulario de Registro

<input type="text" enterkeyhint="next" placeholder="Nombre">  
<input type="email" enterkeyhint="next" placeholder="Correo">  
<input type="password" enterkeyhint="done" placeholder="Contraseña">

Los primeros campos usan next para avanzar; el último usa done para finalizar.

Compatibilidad en Navegadores

Soportado en: Chrome para Android, Safari en iOS (parcialmente), y navegadores modernos basados en Chromium.
No soportado en: Algunos navegadores móviles antiguos.
Importante: El atributo es una sugerencia, por lo que el navegador puede ignorarlo.

Buenas Prácticas

Coherencia: Usa valores que coincidan con la acción esperada (ej: search en barras de búsqueda).
Accesibilidad: No dependas solo de enterkeyhint; asegúrate de que el formulario funcione sin él.
Pruebas: Verifica el comportamiento en distintos dispositivos y navegadores.

Manejo con JavaScript

Aunque enterkeyhint es declarativo, puedes combinar con eventos para controlar acciones:

<input 
  type="text" 
  enterkeyhint="go" 
  placeholder="Ingresa una URL" 
  onkeypress="if (event.key === 'Enter') navegar()"
>

<script>
  function navegar() {
    const url = document.querySelector('input').value;
    window.location.href = url.startsWith('http') ? url : `https://${url}`;
  }
</script>

Errores Comunes

Error 1: Usar valores incorrectos

<!-- Incorrecto: "done" no es apropiado para un buscador -->
<input type="search" enterkeyhint="done">

Error 2: Ignorar la validación del formulario

El atributo no valida datos; usa JavaScript o HTML5 Validation para asegurar entradas correctas.

Conclusión

El atributo enterkeyhint es una herramienta sencilla pero poderosa para optimizar formularios en dispositivos móviles. Al guiar a los usuarios con acciones claras en el teclado, mejoras la usabilidad y la experiencia de navegación. ¡Ideal para aplicaciones modernas y formularios interactivos!

¿Qué es enterkeyhint?