Crea atajos de teclado con Mousetrap

Los atajos de teclado en las aplicaciones Web son uno de esos detalles con los que, aunque se puede vivir sin ellos, es bien cierto que otorgan un nivel «extra» de interacción, además de permitir acceder a funcionalidades de forma más directa. Aplicaciones como Gmail lo atestiguan. Cualquier «power user» adora los atajos de teclado y suele ser lo primero que se aprende.

En el mundo del desarrollo Web hay varias opciones a la hora de incorporar atajos de teclado a nuestros proyectos Web. Aunque el objetivo final, que es asociar acciones a combinaciones de teclado se puede lograr con código «vanilla», es aconsejable usar una librería que nos permita centrarnos en la funcionalidad. Es el caso de mousetrap, una librería de Javascript que apenas pesa 4 kb. y que no tiene dependecias.

Usando mousetrap

Con mousetrap se asocian (bindean) teclas o combinaciones de teclas a una función anónima. Por ejemplo, en el siguiente ejemplo asociamos las teclas CONTROL + Y a la acción de lanzar un mensaje por la consola:

Mousetrap.bind("ctrl+y", function() {  
    console.log("Hola desde Wmedia :)");
});

Otro ejemplo usando la tecla SHIFT:

Mousetrap.bind("shift+k", function() {  
    // Shift presionado :)
});

También se pueden asociar secuencias de teclas en lugar de combinaciones, usando espacios entre las mismas:

Mousetrap.bind("h o l a d e s d e w m e d i a", function() {  
    // Hacer lo que sea
});

Mousetrap.bind('up up down down left right left right b a enter', function() {  
    // Huevo de pascua FTW
})

Incluso se puede pasar a mousetrap una matriz como parámetros para que escuche secuencias de combinaciones, por ejemplo, la secuencia de cortar y pegar, CONTROL + C y CONTROL + Y:

Mousetrap.bind(["command+c", "ctrl+v"], function() {  
    // Copiar y pegar, todo es empezar
});

Como véis mousetrap simplifica de forma dramática el trabajo con atajos de teclado en nuestras aplicaciones Web, sobre todo teniendo en cuenta que aquí hemos tocado solo la superficie. Os recomiendo que le echéis un vistazo a la documentación oficial para aprender más sobre mousetrap.