CODEWITHSUNDEEP
javascripthotkeys
M4N
M4N

Reputation: 96596

How to implement gmail-like 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 complex 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 component (jquery plugin or similar) for that task? Or what would be a good approach to implement such hotkeys?

Upvotes: 6

Views: 3484

Answers (4)

realdanielbyrne
realdanielbyrne

Reputation: 31

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

Upvotes: 1

ocodo
ocodo

Reputation: 30289

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.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 small demonstration http://jsfiddle.net/Nwdyd/1/ which also shows collision handling (binding g as well as g i)

Upvotes: 7

Spoike
Spoike

Reputation: 121820

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

var commandI = 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.

Upvotes: 3

Matt Fellows
Matt Fellows

Reputation: 6532

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

Upvotes: 5

Related Questions