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?
Advertisement
Answer
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);
};