Atajos de teclado HTML solamente - Amit Merchant - Un blog sobre PHP, JavaScript, etc.

A menudo, es posible que deba incorporar atajos de teclado en su sitio web. Y en las aplicaciones web modernas, los atajos de teclado se han convertido en una parte integral de la experiencia del usuario.

Si se usan correctamente, los métodos abreviados de teclado para elementos pueden mejorar el flujo de trabajo del usuario y, por lo tanto, la experiencia general.

Ahora, tradicionalmente, si desea utilizar métodos abreviados de teclado, puede buscar la solución que implica detectores de eventos de teclado de JavaScript. Lo he discutido en detalle en este artículo si está interesado en leer al respecto.

Pero recientemente descubrí una forma que te permite configurar teclas de acceso rápido solo HTML. ¡No se requiere JavaScript!

Índice
  1. los accesskey atributo global
  2. Un ejemplo práctico

los accesskey atributo global

Hay un atributo HTML global llamado accesskey que le permite proporcionar una sugerencia para generar un atajo de teclado para el elemento actual.

Aquí un ejemplo.

<a 
    href="/dashboard" 
    title="Dashboard" 
    accesskey="g"
>
    Dashboard
</a>

Como puede ver, podemos configurar el accesskey asignar un hipervínculo y asignarle una clave.

Ahora el accesskey El atributo funciona con la combinación de otra clave específica de la plataforma.

Entonces, si estás en Windows/Linuxprácticamente puedes hacer clic en el "Salpicadero" enlace presionando Otro + gramo.

Para Mac OSserá Opción + gramo.

Y así es como puede implementar teclas de acceso rápido solo HTML.

Puedes configurar accesskey también para otros elementos HTML. Por ejemplo, configura una tecla de acceso rápido en un botón para hacer clic en él virtualmente.

Un ejemplo práctico

configuré un accesskey acceso directo para buscar este blog al que puede acceder pulsando Otro + k juntos.

clave de acceso de ejemplo

¡Así que adelante y pruébalo tú mismo!

Si quieres conocer otros artículos parecidos a Atajos de teclado HTML solamente - Amit Merchant - Un blog sobre PHP, JavaScript, etc. puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas