Cómo agregar atajos de teclado a su sitio web

¿Te gustan los atajos de teclado? Te pueden ayudar a ahorrar mucho tiempo, ¿verdad? ¿Le gustaría agregar atajos de teclado a su propio sitio web, para el beneficio de sus visitantes? Mejoraría enormemente la accesibilidad y navegación de su sitio..

En esta publicación, le daré una guía rápida sobre cómo agregar accesos directos a su página web utilizando una biblioteca de JavaScript llamada Mousetrap. Con Mousetrap puedes designar claves como Shift, Ctrl, Alt, Opciones y Comando para Realiza funciones particulares en tu sitio web.. También funciona bien en navegadores antiguos..

Más sobre Hongkiat:

• Creación de información sobre herramientas animada fácilmente con Hint.Css
• Construyendo una guía paso a paso usando Intro.Js [Tutorial]
• Cómo diseñar el control deslizante del rango HTML5
• Cómo usar cookies y HTML5 localstorage

Empezando

Comience por crear un nuevo documento HTML junto con el contenido y vincular la biblioteca Mousetrap. Usaré la biblioteca Mousetrap alojada en CDNjs para que la biblioteca se sirva a través de la red CloudFlare, que debería ser más rápida que nuestro propio servidor

Ahora usaremos la ratonera 'enlazar' Método para adjuntar teclas de teclado con función. Usted puede asignar una sola tecla, una combinación de teclas o teclas de secuencia, por ejemplo

Sola llave

En este ejemplo, enlazamos la s..

 Mousetrap.bind ('s', function (e) // su función aquí ...); 

Llave combinada

En este ejemplo, enlazamos Ctrl y s. Deberá presionar las dos teclas juntas para realizar la función designada.

 Mousetrap.bind ('ctrl + s', función (e) // su función aquí ...); 

Clave de secuencia

En este ejemplo, el usuario deberá presionar gy luego s después. Si está desarrollando un juego basado en la web, esto podría ser útil para agregar un combo secreto de clave oculta.

 Mousetrap.bind ('g s', function (e) // su función aquí ...); 

Utilizando ratonera

Construiremos una página web simple con un par de atajos de teclado que permitan a los usuarios acceder a algunas funciones en el sitio web. Utilizaremos jQuery para facilitar la manipulación del documento HTML y seleccionar elementos HTML.

Empecemos con algo fácil..

Vamos a enlazar una clave que permitirá al usuario enfocarse en el campo de entrada de búsqueda rápidamente.

1. El siguiente es el código HTML para la búsqueda junto con el carné de identidad.

2. A continuación, creamos una función que se centrará en la entrada de búsqueda.

 función de búsqueda () var search = $ ('# search'); search.val ("); search.focus (); 

3. Por último, enlazamos una tecla para ejecutar la función..

 Mousetrap.bind ('/', búsqueda); 

4. Eso es todo. Ahora debería poder navegar a la entrada de búsqueda presionando el botón /.

Alternativamente, también puede enlazar la combinación de teclas, Ctrl / Cmd + F, que es un atajo de tecla popular que se usa para buscar en muchas aplicaciones de escritorio:

 Mousetrap.bind (['command + f', 'ctrl + f'], buscar); 

Uso de la ratonera con Bootstrap

Es fácil integrar la trampa para ratones con un marco, por ejemplo, Bootstrap. En este segundo ejemplo, mostraremos una ventana de ayuda que mostrará una lista de accesos directos disponibles en el sitio web. Aquí, opto por que el Bootstrap Modal presente la lista y designe el? Clave para mostrar el modal..

Aunque el ? Solo se puede acceder con la tecla Mayús, enlazando solo el? la clave es suficiente.

 Mousetrap.bind ('?', Function () $ ('# help'). Modal ('show');); 

Ahora cuando golpeas el? tecla, aparecerá una ventana emergente.

Consejo para un enlace eficiente

Con el tiempo, su creciente colección de atajos de teclado puede comenzar a desordenar su código. Si esto sucede, hay una extensión que puede agregar para que su “clave de enlace” Códigos más eficientes. Se llama el “Diccionario de encuadernación”. Añade esta extensión después de la biblioteca principal de Mousetrap, ratonera.min.js.

Ahora, en lugar de separar cada enlace de clave, podemos agruparlos ordenadamente en una sola .enlazar() método, como tal:

 Mousetrap.bind ('/': search, 't': tweet, '?': Function modal () $ ('# help'). Modal ('show');, 'j': function next ( ) highLight ('j'), 'k': function prev () highLight ('k')); 

Para una implementación más avanzada, puedes ver la demostración que he hecho. En la demostración, puede presionar la tecla J o K para resaltar la publicación y presionar T para twittear la publicación actual que usted resaltó.

• Ver demostración
• Descargar