Controlar eventos del teclado con JavaScript

por .

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

Categorizado en: