Scorciatoie da tastiera in Javascript con Mousetrap

Ero alla ricerca di come impostare scorciatoie da tastiera in Javascript, e mi sono imbattuto in questa ottima libreria: Mousetrap!

Questa libreria è indipendente, nel senso che non richiede nessun'altra libreria tipo jQuery, è molto leggera e non si "incastra" con altre funzioni impostate nella pagina.

E il tutto in soli circa 20KB di peso.

Vediamo qualche esempio.

Dopo aver incluso la libreria nella pagina:

Mousetrap.bind(['ctrl+k'], function (e) { alert('ok'); return false; });

Intercettiamo la combinazione CTRL+K.

Possiamo impostarne anche più di una:

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

Qui intercettiamo anche CMD+K (MELA+K) per chi usa il Mac.

Possiamo anche impostate una sequenza:

Mousetrap.bind('g ctrl+k', function (e) { alert('ok'); return false; });

La differenza sta nell'assenza delle parentesi quadre; questa è una sequenza, non un doppio binding.

Tutto questo funziona a livello di document, e non funzionerà se il focus è su una input.

Possiamo intrerecettare il comportamento anche su una input semplicemente impostando l'attributo class:

<input type="text" class="mousetrap">

Oltre alla funzione bind, c'è anche unbind, che ha il comportamento contrario, e cioè disattivare una shortcut.

Mousetrap.unbind('ctrl+k');

Basta indicare la combinazione.

Sul sito ufficiale potete vedere altri esempi.

Ma passiamo alla combinazione CTRL+TAB, che ogni programmatore almeno una volta nella vita vuole sovrascivere ().

Questa combinazione funziona, ma solo a metà diciamo; nel senso che se avete più di un tab aperto sul browser, la funzione viene richiamata, ma poi viene anche cambiato tab.

Ho visto che lo stesso comportamente ce lo ha anche sugli esempi ufficiali; immagino che dipenda dal fatto che da JS non si può sovrascrivere il comportamento del browser.

A parte questo, libreria da avere assolutamente!

Enjoy!