According to MDN, we should most definitely not be using the .keyCode
property. It is deprecated:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
On W3 school, this fact is played down and there is only a side note saying that .keyCode
is provided for compatibility only and that the latest version of the DOM Events Specification recommend using the .key
property instead.
The problem is that .key
is not supported by browsers, so what should we using? Is there something I'm missing?
You have three ways to handle it, as it's written on the link you shared.
if (event.key !== undefined) {
} else if (event.keyIdentifier !== undefined) {
} else if (event.keyCode !== undefined) {
}
you should contemplate them, that's the right way if you want cross browser support.
It could be easier if you implement something like this.
var dispatchForCode = function(event, callback) {
var code;
if (event.key !== undefined) {
code = event.key;
} else if (event.keyIdentifier !== undefined) {
code = event.keyIdentifier;
} else if (event.keyCode !== undefined) {
code = event.keyCode;
}
callback(code);
};