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!
javascript mousetrap callback bind mac keypress keydown keyup mac command
Commentami!