KeyboardEvent.keyCode deprecated! Alternate is .key

I have been using KeyboardEvent.keyCode property to detect the keys pressed in JavaScript. For example, in one of my applications, I had been using the keyCode property to detect the Enter keypress and execute a corresponding code. Though the code was working fine on all browsers, I recently came to know that the KeyboardEvent.keyCode deprecated and the alternate .key property has to be used instead. Here’s a link to Mozilla Web API documentation that says why keyCode should not be used and the browsers supported.

Here’s my old code that uses the keyCode property to detect the ‘Enter’ keypress and trigger a module execution.

if (event.keyCode === 13 || event.keyCode === 186) {
         printCircuit_p(event);
}

KeyboardEvent.keyCode deprecated

For many years, people have been using KeyboardEvent.keyCode for identifying the key pressed by the user in JavaScript and jQuery and it was supported in almost all browsers including IE6. But now, it has been deprecated from the ECMAScript KeyboardEvent specification. I had been wondering why was the KeyboardEvent.keyCode deprecated and here’s a reason. KeyCode property was deprecated because it has been ‘inconsistent across platforms and even the same implementation on different operating systems or using different localizations‘. Said that the alternative is to use the ‘.key‘ property.

For instance, if you want to detect ‘Enter’ is pressed or not, then here’s how it’s done.

if(event.key === 'Enter'){

}

The key property returns the identifier of the key that was pressed when a key event occurs. The key property returns a string representing the key pressed and the possible value can be a single character such as ‘a,z,c,$, etc.’ and multi-characters such as ‘Shift, Enter, Alt, etc.’.

Read more about the key property from W3Schools.

So how do you write a code for graceful degradation of keyCode property so that it works on older browsers that still support keyCode and not key property? Here’s how it’s done.

var key = event.key || event.keyCode;

Here we use event.key first and if that property has a value that is not undefined. Else it will look for keyCode property.

Between if you are wondering what is Graceful degradation, then here’s the definition.

graceful degradation is the practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user in experience in older browsers. This lower level is not as nice to use for your site visitors, but it does still provide them with the basic functionality that they came to your site to use; things do not break for them – Reference.

Note: To detect the “ALT”, “CTRL”, “META” or “SHIFT” key, use the altKey, ctrlKey, metaKey, or shiftKey property as described in this article.