Mousetrap es una pequeña biblioteca JavaScript para la manipulación de eventos del teclado de manera muy simple.
Este proyecto es ultra-liviano, apenas 3kb en su versión simplificada, que si le sumamos la compresión gzip el resultado final ronda los insignificantes 1.6kb. Un peso casi despreciable si tenemos en cuenta que a nuestro proyecto le agregamos la capacidad de aceptar atajos del teclado.
Actualmente Mousetrap es compatible con los navegadores más modernos, ademas de ser compatible con algunos no tan nuevos, como por ejemplo: Internet Explorer 6.
La biblioteca principalmente tres tipos de eventos distintos: keypress, keydown, y keyup. Ademas de obviamente tener la capacidad de reconocer combinaciones y secuencias personalizadas.
Detección de atajos del teclado con JavaScript
1. Agregamos la biblioteca a nuestro proyecto:
<script src="/path/to/mousetrap.min.js"></script>
2. Configuramos los atajos:
<script>
// single keys
Mousetrap.bind('4', function() { console.log('4'); });
Mousetrap.bind("?", function() { console.log('show shortcuts!'); });
Mousetrap.bind('esc', function() { console.log('escape'); }, 'keyup');
// combinations
Mousetrap.bind('command+shift+K', function() {
console.log('command shift k');
});
// map multiple combinations to the same callback
Mousetrap.bind(['command+k', 'ctrl+k'], function() {
console.log('command k or control k');
// return false to prevent default browser behavior
// and stop event from bubbling
return false;
});
// gmail style sequences
Mousetrap.bind('g i', function() { console.log('go to inbox'); });
Mousetrap.bind('* a', function() { console.log('select all'); });
// konami code!
Mousetrap.bind('up up down down left right left right b a enter',
function() {
console.log('konami code');
});
</script>
En conclusión MouseTrap es una excelente solución para proveer de una nueva funcionalidad a nuestro proyecto, es muy fácil de utilizar, y se configura muy rápidamente. Directo a marcadores 😀
Web: Mousetrap
