Javascript: different keyCodes on different browsers?

Question

So I've seen some forums posts about different browsers reporting differenct keyCodes, but everyone seems so avoid the "why?".

I was trying to capture the colon (:) keyCode and realized that Firefox reports back e.keyCode 56. While Chrome reports back 186 (I think that's what it was).

Is there a univeral way of getting the right keyCode across all browsers?

And why are they different if they are the same keys?

I would be more curious as to whether there is a international way of getting the same key press.

Thanks.

@galambalazs, this chart does not account for colon and semi-colon. Which suprises me. PPK is usually on top of that sort of thing. — Senica Gonzalez, Oct 07 '10 at 17:02
http://unixpapa.com/js/key.html has the colon and semi-colon, and seems pretty exhaustive. — ruffin, Jan 04 '13 at 14:02
KeyEvent (and hence keyCodes) is [basically deprecated and being replaced with KeyboardEvent](http://stackoverflow.com/a/33860580/1836776). This is not an answer as to why different browsers report different keyCodes but hopefully a pointer to what will potentially be a good solution in the future. Potentially. — Marc Durdin, Nov 24 '15 at 08:10

Tim Down · Answer 1 · 2014-02-05T22:13:51.977

18

It depends whether you're interested in which physical key the user has pressed or which character the user has typed. If it's the character you're after, you can get that reliably in all major browsers (using the keypress event's which property in most browsers or keyCode in IE <= 8), but only in the keypress event. If you're after the key, use the keydown or keyup event and examine the keyCode property, although the exact key-code mappings do differ somewhat between browsers.

An excellent explanation of and reference for all JavaScript key-related events can be found at http://unixpapa.com/js/key.html.

To detect the user typing a colon character reliably in all the major browsers, you could do the following:

document.onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
    if (charCode && String.fromCharCode(charCode) == ":") {
        alert("Colon!");
    }
};

edited Feb 05 '14 at 22:13

answered Oct 07 '10 at 16:12

Tim Down

306,503
71
443
520

charCode != keyCode, except for /[A-Z 0-9]/ – Nathan Bubna Feb 05 '14 at 16:32
@NathanBubna: I know. However, in old IE's `keypress` event, `keyCode` confusingly *is* the character code, not a key code, and all other mainstream browsers support `which`, so `keyCode` is only used in old IE. Read all about it at http://unixpapa.com/js/key.html (as linked to in my answer). – Tim Down Feb 05 '14 at 17:40
Ick. Old IE strikes again. Thanks for the explanation! – Nathan Bubna Feb 05 '14 at 20:40

score 13 · Accepted Answer · answered Oct 07 '10 at 16:10

13

See http://unixpapa.com/js/key.html for an explanation why they have different keys. I do not know of an international way to match keys.

answered Oct 07 '10 at 16:10

Plaudit Design

1,158
8
16

1

The conclusion part of the link I included contains some information that may help you implement a universal solution -- just depends on your situation. – Plaudit Design Oct 07 '10 at 16:13
Nice article you linked me to. – Senica Gonzalez Oct 07 '10 at 16:51

score 3 · Answer 3 · answered Feb 09 '17 at 09:12

3

This is an old question. The modern way to do this is use event.key. See MDN Key

answered Feb 09 '17 at 09:12

kidconcept

439
6
12

1

This is still the current way, considering Key is still in draft and not supported on most mobile browsers http://caniuse.com/#feat=keyboardevent-key – Nicu Surdu Mar 01 '17 at 16:34
suit your self, it's not very far off. It's worth noting that the far and away most popular mobile browser, Chrome for android has full support. The biggest gotchas are iOS and Safari, though Safaris' support is coming in the next version. I would recommend using one of the many available polyfills. – kidconcept Mar 01 '17 at 18:53
Actually you can use it. It's supported for most used browsers. (http://caniuse.com/#feat=keyboardevent-key) If the property is undefined you can still use a small fallback function. – CodeBrauer Jun 08 '17 at 14:52
Note that there are differences, however, in some modern browsers. For example, pressing the dot key (`.`/`Del`) on a Num Pad with the Num Lock on reports the event.key as "Del" in Edge, but reports it as "." in Chrome. People keep suggesting that Safari is the new Internet Explorer. Lately I wonder if Edge is actually the new Internet Explorer. Oh, wait. – Dale Harris May 04 '18 at 20:40

score 0 · Answer 4 · edited May 23 '17 at 12:02

0

I think you should make JavaScript to get the keycode of the ':' character, so the script will know what is it in a certain environment. Similar question had been asked here, in stackoverflow.

edited May 23 '17 at 12:02

Community

1
1

answered Oct 07 '10 at 16:13

ifroz

93
3
6

score 0 · Answer 5 · answered May 05 '21 at 08:55

Have also a look at this GitHub file: https://github.com/bpeacock/key-to-charCode/blob/master/jQuery.getChar.js on how you can use keyDown instead of keyPress events.

I used this for a barcode scanner with a keyboard wedge, on a mobile device, that had a bug on returning (keyPress) data for scanning a hyphen. Works pretty good. Except when I tested the app in a browser with a regular keyboard, I noticed that the hyphen works on Chrome, but not on Firefox. Strange but true. Fixed by adding code 173 in the above JS file, in addition to code 189.

This makes me wonder what the keyboard is actually sending. The keydown code of 173 or 189 for pressing the hyphen key (- _) is apparently not sent by the keyboard itself, but created by the browser that sends the keyDown event to my javascript application.

Javascript: different keyCodes on different browsers?

5 Answers5

Linked

Related