I'd like to implement keyboard hotkeys in a web application. So far I've been using the jquery.hotkeys plugin, and it allowed me to implement simple hotkeys (e.g. single keystrokes like a).

Now to support some more plex navigation via the keyboard, I'd like to implement 'multi-key' hotkeys like in gmail, where for example pressing g (for 'go') followed by i (for 'inbox') takes you the the inbox.

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

I'd like to implement keyboard hotkeys in a web application. So far I've been using the jquery.hotkeys plugin, and it allowed me to implement simple hotkeys (e.g. single keystrokes like a).

Now to support some more plex navigation via the keyboard, I'd like to implement 'multi-key' hotkeys like in gmail, where for example pressing g (for 'go') followed by i (for 'inbox') takes you the the inbox.

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

• javascript
• hotkeys

4 Answers 4

There's a better solution to this using keymaster with the keymaster-sequence plugin.

The sources are here keymaster.js and here keymaster.sequence.js

Use them like this:

<script type="text/javascript" src="https://raw.github./madrobby/keymaster/master/keymaster.min.js"></script>
<script type="text/javascript" src="https://raw.github./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 small demonstration http://jsfiddle/Nwdyd/1/ which also shows collision handling (binding g as well as g i)

Set a global boolean value when g is pressed. Then check if it's set when i is pressed. You can optionally implement a timeout on the g press so that you have limited time to press i afterwards.

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;
}

You could still use the plugin by adding a state and a timeout, much as Matt Fellows suggests.

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', mandI);

var mandI = function() {
  if (gWasPressed) {
    // go to inbox
    clearKeyState();
  } else {
    // do whatever i was supposed to do if g wasn't pressed
  }
}

Alternate solution would be to rebind the keys when g is pressed, and unbind them when the timeout expires or when the secondary key i is pressed.

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

$('#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./realdanielbyrne/HoyKeys.git or go to the github repo page https://github./realdanielbyrne/HoyKeys or fork and contribute.