KeyboardEvent.keyCode :
The value of keypress event is different between browsers. IE and
Google Chrome set the KeyboardEvent.charCode value. Gecko sets 0 if
the pressed key is a printable key, otherwise it sets the same keyCode
as a keydown or keyup event
So from Firefox point of view, it has actually returned correct values. See the docs.
keyCode
, which
, keyIdentifier
and charCode
are deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being
dropped. Avoid using it and update existing code if possible;
keyIdentifier
had no support in IE and Firefox and been dropped from Opera and Chrome
With charCode
as Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations
So what are the alternatives?
I. Use the key
property instead
readonly attribute DOMString key
Holds a key attribute value corresponding to the key pressed
Examples :
"a", "A", "@", "%", "$", "ا", "ب", "ة", "ت", ..., "١", "٢", "٣", "Tab", "Enter" , all "F1"...`
It has earned the support of all major browsers (Firefox 52, Chrome 55, Safari 10.1, Opera 46) except Internet Explorer 11 which has
non-standard key identifiers and incorrect behavior with AltGraph. More info
If that is important and/or backward compatibility is, then you can use feature detection as in the following code :
Notice that the key
value is different from keyCode
or which
properties in that : it contains the name of the key not its code. If your program needs characters' codes then you can make use of charCodeAt()
.
For single printable characters you can use charCodeAt()
, if you're dealing with keys whose values contains multiple characters like ArrowUp
chances are : you are testing for special keys and take actions accordingly. So try implementing a table of keys' values and their corresponding
codes charCodeArr["ArrowUp"]=38
, charCodeArr["Enter"]=13
,charCodeArr[Escape]=27
... and so on, please take a look at Key Values and their corresponding codes
if(e.key!=undefined){
var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
}else{
/* As @Leonid suggeted */
var characterCode = e.which || e.charCode || e.keyCode || 0;
}
/* ... code making use of characterCode variable */
II.You can also use the code
property :
readonly attribute DOMString code
Holds a string that identifies the physical key being pressed. The
value is not affected by the current keyboard layout or modifier
state, so a particular key will always return the same value.
It has a similar effect to the key
property and an output like "keyW"
for button W pressed of a US keyboard with QUERTY
layout. If the same button was pressed in another layout (AZERTY) or another language (Hebrew) or combined with a modifier
(shift), key
property would change accordingly, while the code
property would still have the same value "keyW"
more on this here.
The code
property is supported in Chrome 49, Firefox 52, Safari 10.1 and Opera 46 But not in Internet Explorer.
see also :
- KeyboardEvent.charCode
- KeyboardEvent.keyIdentifier
- KeyboardEvent.keyCode
- KeyboardEvent.which
- KeyboardEvent.key
- key property support
- KeyboardEvent.code
- code property support