Gestire combinazioni di tasti in Javascript

Non so se vi è mai capitato di notare che alcuni siti web sono in grado di intercettare i tasti.

Due esempi sono GMAIL e OUTLOOK.

Volendo possiamo dotare anche le nostre web app di questa funzionalità con la libreria Javascript Mousetrap.

Da quanto vedo, il supporto per i browser è ottimo (addirittura IE 6), e anche i tasti supportati non sono pochi.

Inoltre la libreria non ha nessuna dipendenza, e da qualche test non sembra dia fastidio ad altre librerie.

Vediamo qualche esempio.

Se volessimo simulare GMAIL e OUTLOOK per la pressione del tasto n:

Mousetrap.bind(
    'n',
    function() {
        doSomething();
    },
    'keyup'
);

Il primo parametro che passiamo alla funzione bind è il tasto.

Poi l'operazione da svolgere (in questo caso una funzione di callback).

Infine quando attivare l'evento (keyup, keypress o keydown).

Possiamo anche sfruttare una combinazione di tasti:

Mousetrap.bind(['command+e', 'ctrl+e'], function(e) {
    doSomething();
    return false;
});

I tasti, in questo caso, devono essere premuti insieme.

Questo snippet accetta due combinazioni differenti (command è familiare agli utenti Mac).

Se invece vogliamo dare una sequenza di tasti da rispettare:

Mousetrap.bind('c q k up down enter', function() {
    doSomething();
});

La funzione verrà richiamata solo verrà rispettata la sequenza.

La libreria va ovviamente oltre a questi esempi, con in quali però ci siamo fatti un'idea delle possibilità!

Ciao!