jQuery hotkeys: prevent IE from running its own shortcuts, like Alt+H

Question

Using jQuery hotkeys, I try to bind shortcuts like Alt + H, Alt + C to some specific actions in my site. The event propagation stops (as it should) in all browsers but IE. First of all, is it possible to achieve this? If so, how?

Here is a code sample:

jQuery(document).bind('keydown', 'Alt+H',
     function (event)
     {
        $this.toggleMenu( 'H' );
        if(jQuery.browser.msie) {
            event.cancelBubble = true;
        }
                    else
                    {
            event.stopPropagation();
        }
        return false;
     } );

In IE, the line $this.toggleMenu( 'H' ); gets executed, but then cancelbubble seems to have no effect (the browser opens its "Help" menu)

Answer 1

This is always a weird thing to attempt (due to browser's built-in hotkeys, etc), but I've had luck with using the onKeyUp event.

The problem with keydown is that it may only be sending one key at a time. So if you hit ALT it's one trigger of keydown, and then C is a second trigger. KeyPress also has probs in some environments because modifier keys like ALT and CTRL don't count as keypresses (I think.. can anybody explain this better?).

If you use keyup you can check whether ALT is being held down while also checking the key. Still working out the kinks, but try this (I only verified in win7: ie9 and chrome):

$(window).keyup(function (e)
{
    // warning: only tested with EN-US keyboard / locale

    // check whether ALT pressed (and not ALT+CTRL, ALT+SHIFT, etc)
    var key = e.key || String.fromCharCode(e.keyCode);
    if (e.altKey && !e.ctrlKey && !e.shiftKey && key)
    {
        // if ALT pressed, handle the keycode shortcut
        var keyPressed = key.toUpperCase(); // normalize input
        switch (keyPressed)
        {
            case "C":
                // do stuff for ALT-C
                break;
            case "H":
                // do stuff for ALT-H 
                break;
        }
    }
});

Problems/Questions:

• Uses jQuery, but pure JS solution is not too complicated
• Is it possible to prevent default browser behavior by canceling event?
• Will it work in browsers other than Chrome and IE9? (probably FF and Safari)
• If user releases ALT key BEFORE releasing the letter key, it doesn't work
• If user presses letter key BEFORE pressing ALT key, it doesn't work
• Tried using ACCESSKEY attributes, but that only sets focus.. I wanted to click a hyperlink and/or fire some element's click() event based on some ALT-X combination.
• While this may be acceptable for an enterprise web application (since locale and browser support is usually narrower focus, and since users are typically trained on the software), it may not be acceptable for web sites (due to large number of browsers in use, localization concerns that add to complexity, etc)... would have to think about it some more.

Hope this helps somebody... feel free to bring on the constructive criticism as this is a feature clients are ALWAYS asking about when I build them web apps. (they are used to the legacy form-driven apps of the 80s and 90s and want extensive keyboard support, which is understandable, especially when they pay for it!)