What's the most robust way of creating a global keyboard shortcut handler for a Web application using JavaScript i.e. which event(s) should I handle and what should the event handler(s) be attached to?

I want something like the system in Gmail which can handle both single keypress shortcuts and also shortcuts with modifier keys e.g. Ctrl + B etc. The code has to work in IE 6 as well as modern browsers.

I have the Prototype framework available to use but not jQuery, so please, no jQuery-specific answers!

What's the most robust way of creating a global keyboard shortcut handler for a Web application using JavaScript i.e. which event(s) should I handle and what should the event handler(s) be attached to?

I want something like the system in Gmail which can handle both single keypress shortcuts and also shortcuts with modifier keys e.g. Ctrl + B etc. The code has to work in IE 6 as well as modern browsers.

I have the Prototype framework available to use but not jQuery, so please, no jQuery-specific answers!

• javascript
• prototypejs

• openjs.com/scripts/events/keyboard_shortcuts – James Commented Mar 4, 2009 at 16:51

6 Answers 6

Just thought I'd throw another into the mix. I recently released a library called Mousetrap. Check it out at http://craig.is/killing/mice

The HotKey library available in the LivePipe controls package works with Prototype and is IE compatible.

http://livepipe.net/extra/hotkey

JimmyP posted this as a comment, but it deserves to be an answer for voting purposes.

http://www.openjs.com/scripts/events/keyboard_shortcuts/

What I would do is attach onKeyUp events to the document.body. Then, in this event handler, I would use the Element.fire method to fire a custom event. Though this step is optional, it will help in decoupling the event handler from the action to be performed, and you can use the same custom-event handler from say an button click event.

$(document.body).observe("keyup", function() {
    if(/* key + modifier match */) {
        $(document.body).fire("myapp:mycoolevent");
    }
});

$(document.body).observe("myapp:mycoolevent", function() {
    // Handle event.
});

Later, to bind the same event to a button click:

$(button).observe("click", function() {
    $(document.body).fire("myapp:mycoolevent");
});

As far as handling modifier keys is concerned, check out this resource (very old, but still looks applicable) for more help.

There is also new JavaScript library called jwerty, it's easy to use and doesn't rely on jQuery.

I recommend having a look at Keystrokes. It makes this sort of thing extremely easy.

import { bindKey, bindKeyCombo } from '@rwh/keystrokes'

bindKey('a', () =>
  console.log('You\'re pressing "a"'))

bindKeyCombo('ctrl > y, r', () =>
  console.log('You pressed "ctrl" then "y", released both, and are pressing "r"'))