How to implement gmail-like hotkeys

Question

I would like to use keyboard shortcuts in a web application. So far I have used the jquery.hotkeys plugin, and this has allowed me to implement simple keyboard shortcuts (e.g. single keystrokes, e.g. a ).

Now, to support more complicated keyboard navigation, I would like to use "shortcuts with multiple keys", for example, in gmail, for example, by pressing g (for "go") and then i (for 'inbox') sends you a folder incoming messages.

Does anyone know of a javascript component (jquery plugin or similar) for this task? Or what would be a good approach to implementing such hotkeys?

Answer 1

There is a better solution for this using keymaster with keymaster-sequence .

Sources are here keymaster.js and here keymaster.sequence.js

Use them as follows:

 <script type="text/javascript" src="https://raw.github.com/madrobby/keymaster/master/keymaster.min.js"></script> <script type="text/javascript" src="https://raw.github.com/chevalric/keymaster-sequence/master/keymaster.sequence.min.js"></script> <script> key.sequence(["g","i"], function () { var el = document.getElementById("result"); el.innerHTML = "You first pressed 'g', then you pressed 'i'"; }); </script> <div id="result"></div> 

Here's a little demo of http://jsfiddle.net/Nwdyd/1/ , which also shows collision handling ( g binding as well as gi )

Answer 2

Set the global boolean value by pressing g . Then check if it is installed by pressing i . You can optionally implement a timeout in press g , so that you have a limited time for further pressing i .

 var goPressed = false; function hotkeyPressed (event) { if (event.keyCode == KEYCODE_FOR_G) { goPressed == true; //Optionally: setTimeout(clearPresses, 3000); } if (event.keyCode == KEYCODE_FOR_I && goPressed) { gotoInbox(); } } function clearPresses() { goPressed = false; } 

Answer 3

You can still use the plugin by adding state and timeout, as well as Matt Fellows .

 var gWasPressed = false; var clearKeyState = function() { gWasPressed = false; } var changeKeyState = function() { gWasPressed = true; setTimeout(clearKeyState, 3000); } $(document).bind('keydown', 'g', changeKeyState); $(document).bind('keydown', 'i', commandI); var commandI = function() { if (gWasPressed) { // go to inbox clearKeyState(); } else { // do whatever i was supposed to do if g wasn't pressed } } 

An alternative solution is to overwrite the keys when you press g and cancel them when the timeout expires or when the secondary i key is pressed.

Answer 4

There is a new version of hotKeys.js that works with jQuery version 1.10+. This is a small, 100 line javascript file. 4kb or only 2kb. Here are some simple usage examples:

 $('#myBody').hotKey({ key: 'c', modifier: 'alt' }, doSomething); $('#myBody').hotKey({ key: 'f4' }, doSomethingElse); $('#myBody').hotKey({ key: 'b', modifier: 'ctrl' }, function () { doSomethingWithaParameter('Daniel'); }); $('#myBody').hotKey({ key: 'd', modifier :'shift' }, doSomethingCool); 

Clone the repo from github: https://github.com/realdanielbyrne/HoyKeys.git or go to the github report page https://github.com/realdanielbyrne/HoyKeys or fork and contribute.