Robust Keyboard Shortcut Handling Using Javascript

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 handl

Solution 1:

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

Solution 2:

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

http://livepipe.net/extra/hotkey

Solution 3:

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.

Solution 4:

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