Note that you should avoid using this (or anything else with JS) to emulate shortcuts.<p>The reason is because what this usually looks like "oh nice I can define shortcuts people can press". What it actually means is: "Ohcrap, that shortcut only works for US-US 104 keyboard layouts, and about 80% of people can't press that shortcut".<p>For example: suppose you want a shortcut for shift+/, which is for the US keyboard under the small right finger. But that shortcut can't be defined for SG (swiss-german) because there the / is on the numeric bar where 7 is. So if you assume (for whatever reason) that left+right small finger is a convenient shortcut, and left small finger + right index finger top isn't, then you're totally screwed. Instead, to reach the right small finger low on swiss german, you'd have to define shift + "-". Except that if you define that, it'll be one of the most uncomfortable keyboard shortcuts imaginable for US users, which find - on the numeric row top --> bottom left small finger + top right small finger = ugh.<p>The truth is that you cannot do reasonable shortcut definition the way that everybody would like to with JS... yet.<p>But wait, can't you like, define some reasonable presets and let people choose their own? The answer is no, because you don't have a reliable way to translate a keydown/keyup to a unicode char, and the unicode char is related to the modifier keys, not the key cap, so though you can do that shortcut definition, you can't show to the user what that shortcut definition actually is, because it'd be either undefined or completely wrong.<p>I've written at length about this here: <a href="http://codeflow.org/entries/2013/jan/30/keyboard-events-in-javascript-are-broken/" rel="nofollow">http://codeflow.org/entries/2013/jan/30/keyboard-events-in-j...</a>
This is such nice work that I hesitate to bring up a minor point of coding style... But the use of names_with_underscores looks out of place in JavaScript.<p>JavaScript code traditionally uses PascalCaseNames for constructors and camelCaseNames for variables, properties, and methods. You do see UPPERCASE_NAMES_WITH_UNDERSCORES used sometimes for "constants", but that's about it.<p>Of course, names_with_underscores work just as well as any other names, and some people use them in their own JavaScript code, but I think libraries should follow the traditional native conventions of their language.<p>It would be like releasing a Ruby library that used camelCaseNames for its method names. It would work, but many Ruby developers would feel that those names were a bit out of place in a language where method names customarily use underscores.<p>Mentioning it here basically just as a reminder for other library developers: "When in Rome..."
Tangentially, can someone on the W3C please fix the sorry state of key bindings across UAs?<p>Cross-browser idiosyncrasies are finally improving...except for webapp key bindings. Alt-F is taken in IE, Ctrl-whatever is taken in other UAs. Or an extension like (the awesome) vimium conflicts with some key bindings, so you have to disable it all together.<p>To the point where Asana uses <i>tab</i> as their short cut key. Tab! Wtf! "tab-p" for project. Bizarre!<p>But I guess I can't blame them, as I wouldn't be surprised if it's the only shortcut modifier that wasn't taken yet across all UAs.<p>I admittedly have no solutions to propose, so am just ranting about an understandably hard problem...but it would be nice if someone came along and fixed this. Please. :-)
This looks like <a href="https://github.com/ccampbell/mousetrap" rel="nofollow">https://github.com/ccampbell/mousetrap</a>
I'm much more fond of the implicit syntax of mousetrap though.
Looks great. I was impressed that the keyboard visualization handled up to 7 simultaneous button pressed on my physical keyboard. Honestly, I wasn't aware my keyboard's wiring (MacBook Air) was capable of handling that.
Nice. This seems to solve a common problem for developers building rich UIs.<p>On a similar topic, does anybody have any pointers for implementing keystroke-by-keystroke character replacement in an INPUT box that doesn't suck? I'd like users to be able to enter "townhall" but have the input value be "TOWNHALL" and there doesn't seem to be a simple way to do this that doesn't fail when the user uses the arrow key or wants to insert more than one character in the middle of an input box.
If you use this for hotkeys in your application make sure to return false or set e.handled to true or something like that. I don't remember the exact details right now.<p>Otherwise features from the browser like "incremental search" in firefox will get priority over the key captures in your app. In fact <i>both</i> your key capture and the incremental search will trigger which is very frustrating as the page starts scrolling to the first match of the letter you just typed.<p>But be very careful while doing this. Only do it for for your own hotkeys and make sure they are not used for other hotkeys in most common browsers! If you always swallow the keypress, normal hotkeys like ctrl+t for new tab will stop working for the user also.
I built a demo with some similarities 7 month ago (<i>EDIT</i> - that's not a plagiarism charge, the OPs submission predates mine and was created a year ago).
<a href="https://gist.github.com/arnehormann/4163916" rel="nofollow">https://gist.github.com/arnehormann/4163916</a> for the source and <a href="http://bl.ocks.org/arnehormann/raw/4163916/keycodes.html" rel="nofollow">http://bl.ocks.org/arnehormann/raw/4163916/keycodes.html</a> for the demo.
The code is documented and includes a konami code and a mode switching example.
It's set to a German Windows keyboard layout, but the code includes comments on how to change that.
I know the mess is in the OS-side but is there any chance we will have some day a DOM API independent of the keyboard layout?<p>For instance you want to make a game using WSAD keys, well in a french keyboard it's ZSQD... Also in a French keyboard, there some keys which trigger the same keycode so you cannot differenciate them! (I think it was the comma with something else)<p>If you want to make a software like Blender on the web which have a lot of key shortcuts you are a bit screwed!
My biggest issue is wanting to bind ctrl/meta-x/c/v to do what you think they would do in my UI (a graph editor), but not do anything in input fields. I can stopPropagation, but it is a pain to keep track of.
This just looks like a development implementation of <a href="http://keycodes.atjayjo.com/" rel="nofollow">http://keycodes.atjayjo.com/</a>
Is it meant to work with all the keys? Chrome 29:<p>> Open page<p>> Don't touch anything<p>> Type<p><pre><code> this is a test
</code></pre>
> Now you've moved down three times.
pressing as many keys as possible makes me wonder how is wired my keyboard, I can get all 8 'asdf' and 'uiop' in down state, but not 'asdf' 'hjkl'
nor 'qwer' 'hjkl' .. funny