Crear atajos de teclado con Mousetrap

Algunas de las mejores partes de las aplicaciones web están ocultas en los más pequeños detalles. Ya sabes lo que dice el refrán, "la perfección se esconde en los detalles". Estos "pequeños detalles" a menudo pueden resultar en grandes, grandes mejores. Una de esas pequeñas mejoras pueden ser los atajos de teclado, algo que no pensamos en un principio a la hora de implementar un proyecto pero que puede aportar grandes diferencias con los demás. Aplicaciones web impresionantes como Gmail o GitHub utilizan un montón de atajos de teclado que hacen que, navegar, sea exponencialmente mucho más rápido. Después de evaluar muchas librerías de javascript para atajos de teclado, he encontrado, creo, la mejor: Mousetrap

Usando Mousetrap

El método bind de Mousetrap es el locurón, acepta clave(s) para escuchar, métodos de devolución de llamada y un evento específico a utilizar (si existe):

Mousetrap.bind("s", function(e) {
	//haz lo que quieras
});

¿Sabéis lo agradable que es ver que se puede hacer referencia a las teclas por su nombre de tecla y no es necesario buscar sus números de key code? Puede recibir varias claves añadiendo un + entre ellas:

Mousetrap.bind("shift+k", function() {
	// Crer un enlace
});

También puedes recibir múltiples secuencias de teclas separándolas con espacios:

Mousetrap.bind("j o r g e", function() {
	// Eh soy yo
});

// truco de konami
Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([21, 22, 23]);
});

En el caso de recibir teclas en eventos, puedes pasar Mousetrap en un array:

Mousetrap.bind(["command+s", "ctrl+s"], function() {
	// Guardar el formulario
});

Modificadores como el SHIFT o CONTROL se pueden utilizar también:

Mousetrap.bind("shift+k", function() {
	// Esto tambien se puede utilizar
})

Puedes utilizar teclas que requieren de SHIFT sin tener que mencionar dicha tecla:

Mousetrap.bind("* _ $", function() {
	// Esto tambien se puede utilizar
});

Se pueden eliminar los event listeners con una simple llamada a unbind, pasando la tecla(s) a la función:

Mousetrap.unbind("s");

Puedes usar triggers también si lo deseas:

Mousetrap.trigger("s");

En esencia, con esta librería, obtendrás el máximo control sobre los atajos de teclado. Mousetrap incluso proporciona funcionalidades más avanzadas, si así lo necesitas, así que echa un vistazo a la documentación oficial para obtener más información. Mousetrap es una librería impresionante: sencilla, útil y ligera.

Y este ha sido el artículo en el que trataba explicaros como crear atajos de teclado con Mousetrap, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP