Creating keyboard shortcuts for your HTML5 app?

Question

How to create keyboard shortcuts for HTML5 apps? Using key events don't work because some browsers already define most of those inputs for built-in features such as Save As..., (which are useless for interactive apps).

Solution

Well, that one works for me: (CTRL-S in Chrome)

$(document).keydown(function(evt){
    if (evt.keyCode==83 && (evt.ctrlKey)){
        evt.preventDefault();
        alert('worked');
    }
});

Comments

[lordvlad]

yes, the key is to use event.preventDefault(). still, some shortcuts wont work in some browsers while others wont work in other browsers

[apoq]

I see your point, ctrl-s will fire up save dialog with an alert in FF, but as Juan Mendes mentioned above, you either should use shortcuts that are not used in any browser, or have aliases for your hotkeys for different browsers. I definetly can't see any other way, as a web app can't override built-in functions. Perhaps you should look into writing plugins for that.

[MaiaVictor]

Sure, event.preventDefault() is indeed the key point I was missing. Might I ask if I your solution is cross-browser (as in, on the specification)?

[apoq]

no it's not. I think i've mentioned it in the comment above :)

[www139]

It makes sense because keydown fires multiple times. Neat bit of code.

[Supreme Dolphin]

shortcut.js is awfully slow. it makes typing a nightmare.

[Supreme Dolphin]

use keypress instead since it is what the default browser event procedures use.