5 ms·

Whatthekeycode.com - quickly find a js keycode for any key

141 points by timparker 14y ago

gibybo 14y ago
Heh, I've lost count of how many times I've written "document.onkeydown = function(e) { console.log(e.keyCode); }" to deal with this. This is probably easier, if I can remember it when I need it :)
gokhan 14y ago
Nice, but fails for me with non-English characters on my keyboard, ğüşöçĞÜŞÖÇ, and can't differentiate i and ı.
- tudorizer 14y ago
  yeah, just tested with German keyboard. I guess a localization would be needed? Anyway, upvoting because the guys behind it are awesome.
- kalleboo 14y ago
  This is just a problem with keyCodes in general. They're a very blunt tool that would useless if it weren't that there are barely any alternatives in JS. JavaScript has absolutely massive issues with anything regarding internationalization. This is the language that shipped with a Y2K bug in 1995!
deepakg 14y ago
Probably relevant to the discussion, the mousetrap library: http://craig.is/killing/mice http://craig.is/killing/mice
- abailin 14y ago
  This is my favorite js keyboard plugin by far.
- craigc 14y ago
  I am the author of this library. Just wanted to point out what other people have said. Using keycodes on there own is not very reliable across different keyboard layouts/international keyboards. Mousetrap defaults to trying to use character codes whenever possible, and for keys that don't send character codes (such as arrow keys, space bar, enter, tab, etc) it falls back to using keycodes. So it should handle all the annoying stuff,cross browser inconsistencies, etc. for you.
goochtek 14y ago
It's kind of ironic that you can't bookmark it in Chrome using the ctrl+d shortcut when this is one of those perfect bookmark tools.
- tomaisthorpe 14y ago
  This needs fixing. Would love to have this in my bookmarks, otherwise I'd just forget about it.
  - mustafaakin 14y ago
    What If I told you you can click the star button on search bar to bookmark it?
  - simontabor 14y ago
    Just click Bookmarks then Bookmark this page...
kunil 14y ago
On an unrelated note, is there way to forbid sites to override ctrl+w? I hate it when a web page is not closed with a short cut. edit: I am using firefox
- mike-cardwell 14y ago
  NoScript?
- moonboots 14y ago
  Chrome doesn't let pages capture shortcuts like ctrl+w and ctrl+t.
princeverma 14y ago
it would be nice if it can simultaneously display appropriate JS code to bind for a particular key. Also, if it can recognize key combos like ctrl-alt-s
- bluetidepro 14y ago
  I agree! I would like to see this done.
- Hovertruck 14y ago
  What would you want it do for Ctrl+Alt+S? When you press one, it does exactly what it should – displays the keycode for the key. Key combos like you describe would be handled by the shiftKey/metaKey/etc attributes of the event object provided to the event handler.
jayferd 14y ago
Key codes are pretty good for little things, but they break down pretty quickly if you want international support. In Mathquill, we ended up just using a hidden textarea and a setTimeout, with a few hilarious hacks. The comments and commit history are worth a read: https://github.com/mathquill/mathquill/blob/dev/src/textarea.js https://github.com/mathquill/mathquill/blob/dev/src/textarea...
- TazeTSchnitzel 14y ago
  IMO, this alone is something that the W3C or WHATWG realy needs to deal with. We have cooperation now. Cooperation on keycodes would help everyone.
  - colanderman 14y ago
    They already did: http://www.w3.org/TR/DOM-Level-3-Events/#keys-keyvalues http://www.w3.org/TR/DOM-Level-3-Events/#keys-keyvalues No-one listened to them.
    - TazeTSchnitzel 14y ago
      What a tragedy. :(
  - jayferd 14y ago
    The best part is that keys that don't produce text input have codes on keypress that are indistinguishable from other keys. from http://unixpapa.com/js/key.html http://unixpapa.com/js/key.html : > For browsers that generate keypress events for special keys, it is also generally true that event.keyCode will have the same value for "left-arrow" and "%", however we can usually tell which it is because event.which is zero for special keys (there are problems with this in Opera and Konqueror, see above). Versions of WebKit before 525 took a different approach. They invented unique values to return instead of ASCII codes for special keys, and returned the same value in event.keyCode, event.which, and event.charCode. The table below gives the extended ASCII codes returned by old WebKit versions, and also the ones returned in event.charCode on keydown and keyup events in Macintosh versions of IE.
joefarish 14y ago
Doesn't work in IE8. I know IE8 isn't exactly the latest and greatest web browser but some of us are stuck using it at work!
- timparker 14y ago
  Should be fixed now!
TomGullen 14y ago
Nice! But shift-key doesn't work. For example if I want to get the code for +
- LaRakel 14y ago
  Those are two keys. Key codes are not character codes. Keycodes don't change if you switch to another keyboard layout. Key combinations don't have separate codes. In code you could listen for keydown on the code for shift, and then for the code for the other key.
  - TomGullen 14y ago
    Doh! Thank you!
anvandare 14y ago
DOM keycodes are kind of broken beyond repair[1]. They cannot be relied upon to determine precisely which character a user entered (even jQuery's charcode falls short here) because they do not take into account modifier keys, compositions, or locales. [1] For a (detailed) explanation: http://unixpapa.com/js/key.html http://unixpapa.com/js/key.html
NVI 14y ago
I made something like this a while ago http://elv1s.ru/files/js/key-code-detector.html http://elv1s.ru/files/js/key-code-detector.html
ernestipark 14y ago
The key that is being pressed should be shown on the page somewhere - though it would make it look uglier. But for a utility like this, probably won't matter all that much.
- talmand 14y ago
  http://jsfiddle.net/talmand/pXkNz/ http://jsfiddle.net/talmand/pXkNz/ Although it is interesting to tap on random buttons to see what the results are. Some of them produce a key code but no character (SHIFT and RETURN as examples) while others produce a different character than what I tapped. Just tossed it together rather quickly so there's probably a better way to do it.
klibertp 14y ago
This: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes http://www.cambiaresearch.com/articles/15/javascript-char-co... was sitting in my bookmarks for quite some time now... And will be there, because I use vrome which seems to capture the key presses when there's no input focused :(
DigitalSea 14y ago
Anyone ever noticed that the print screen key is from what I can see, the only key on a conventional qwerty keyboard that doesn't have an event code? What's the reasoning for that?

141 points by timparker 14y ago

Heh, I've lost count of how many times I've written "document.onkeydown = function(e) { console.log(e.keyCode); }" to deal with this. This is probably easier, if I can remember it when I need it :)

gokhan 14y ago

Nice, but fails for me with non-English characters on my keyboard, ğüşöçĞÜŞÖÇ, and can't differentiate i and ı.

tudorizer 14y ago
yeah, just tested with German keyboard. I guess a localization would be needed? Anyway, upvoting because the guys behind it are awesome.
kalleboo 14y ago
This is just a problem with keyCodes in general. They're a very blunt tool that would useless if it weren't that there are barely any alternatives in JS. JavaScript has absolutely massive issues with anything regarding internationalization. This is the language that shipped with a Y2K bug in 1995!

deepakg 14y ago

Probably relevant to the discussion, the mousetrap library: http://craig.is/killing/mice http://craig.is/killing/mice

abailin 14y ago
This is my favorite js keyboard plugin by far.
craigc 14y ago
I am the author of this library. Just wanted to point out what other people have said. Using keycodes on there own is not very reliable across different keyboard layouts/international keyboards. Mousetrap defaults to trying to use character codes whenever possible, and for keys that don't send character codes (such as arrow keys, space bar, enter, tab, etc) it falls back to using keycodes. So it should handle all the annoying stuff,cross browser inconsistencies, etc. for you.

goochtek 14y ago

It's kind of ironic that you can't bookmark it in Chrome using the ctrl+d shortcut when this is one of those perfect bookmark tools.

tomaisthorpe 14y ago
This needs fixing. Would love to have this in my bookmarks, otherwise I'd just forget about it.
- mustafaakin 14y ago
  What If I told you you can click the star button on search bar to bookmark it?
- simontabor 14y ago
  Just click Bookmarks then Bookmark this page...

kunil 14y ago

On an unrelated note, is there way to forbid sites to override ctrl+w? I hate it when a web page is not closed with a short cut. edit: I am using firefox

mike-cardwell 14y ago
NoScript?
moonboots 14y ago
Chrome doesn't let pages capture shortcuts like ctrl+w and ctrl+t.

princeverma 14y ago

it would be nice if it can simultaneously display appropriate JS code to bind for a particular key. Also, if it can recognize key combos like ctrl-alt-s

bluetidepro 14y ago
I agree! I would like to see this done.
Hovertruck 14y ago
What would you want it do for Ctrl+Alt+S? When you press one, it does exactly what it should – displays the keycode for the key. Key combos like you describe would be handled by the shiftKey/metaKey/etc attributes of the event object provided to the event handler.

jayferd 14y ago

Key codes are pretty good for little things, but they break down pretty quickly if you want international support. In Mathquill, we ended up just using a hidden textarea and a setTimeout, with a few hilarious hacks. The comments and commit history are worth a read: https://github.com/mathquill/mathquill/blob/dev/src/textarea.js https://github.com/mathquill/mathquill/blob/dev/src/textarea...

TazeTSchnitzel 14y ago
IMO, this alone is something that the W3C or WHATWG realy needs to deal with. We have cooperation now. Cooperation on keycodes would help everyone.
- colanderman 14y ago
  They already did: http://www.w3.org/TR/DOM-Level-3-Events/#keys-keyvalues http://www.w3.org/TR/DOM-Level-3-Events/#keys-keyvalues No-one listened to them.
  - TazeTSchnitzel 14y ago
    What a tragedy. :(
- jayferd 14y ago
  The best part is that keys that don't produce text input have codes on keypress that are indistinguishable from other keys. from http://unixpapa.com/js/key.html http://unixpapa.com/js/key.html : > For browsers that generate keypress events for special keys, it is also generally true that event.keyCode will have the same value for "left-arrow" and "%", however we can usually tell which it is because event.which is zero for special keys (there are problems with this in Opera and Konqueror, see above). Versions of WebKit before 525 took a different approach. They invented unique values to return instead of ASCII codes for special keys, and returned the same value in event.keyCode, event.which, and event.charCode. The table below gives the extended ASCII codes returned by old WebKit versions, and also the ones returned in event.charCode on keydown and keyup events in Macintosh versions of IE.

joefarish 14y ago

Doesn't work in IE8. I know IE8 isn't exactly the latest and greatest web browser but some of us are stuck using it at work!

timparker 14y ago
Should be fixed now!

TomGullen 14y ago

Nice! But shift-key doesn't work. For example if I want to get the code for +

LaRakel 14y ago
Those are two keys. Key codes are not character codes. Keycodes don't change if you switch to another keyboard layout. Key combinations don't have separate codes. In code you could listen for keydown on the code for shift, and then for the code for the other key.
- TomGullen 14y ago
  Doh! Thank you!

anvandare 14y ago

DOM keycodes are kind of broken beyond repair[1]. They cannot be relied upon to determine precisely which character a user entered (even jQuery's charcode falls short here) because they do not take into account modifier keys, compositions, or locales. [1] For a (detailed) explanation: http://unixpapa.com/js/key.html http://unixpapa.com/js/key.html

NVI 14y ago

I made something like this a while ago http://elv1s.ru/files/js/key-code-detector.html http://elv1s.ru/files/js/key-code-detector.html

ernestipark 14y ago

The key that is being pressed should be shown on the page somewhere - though it would make it look uglier. But for a utility like this, probably won't matter all that much.

talmand 14y ago
http://jsfiddle.net/talmand/pXkNz/ http://jsfiddle.net/talmand/pXkNz/ Although it is interesting to tap on random buttons to see what the results are. Some of them produce a key code but no character (SHIFT and RETURN as examples) while others produce a different character than what I tapped. Just tossed it together rather quickly so there's probably a better way to do it.

klibertp 14y ago

This: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes http://www.cambiaresearch.com/articles/15/javascript-char-co... was sitting in my bookmarks for quite some time now... And will be there, because I use vrome which seems to capture the key presses when there's no input focused :(

DigitalSea 14y ago

Anyone ever noticed that the print screen key is from what I can see, the only key on a conventional qwerty keyboard that doesn't have an event code? What's the reasoning for that?