JavaScript KeyboardEvent keyCode Property: Understanding the Key Code

The keyCode property of the JavaScript KeyboardEvent interface provides a numerical code representing the key that was pressed. While it has been deprecated in favor of the key and code properties, it’s still useful to understand its behavior, particularly when dealing with older browsers or legacy code. This guide will delve into the intricacies of the keyCode property, its syntax, practical usage, and its limitations.

What is the keyCode Property?

The keyCode property is an integer representing the specific key that triggered the keypress, keydown, or keyup event. These codes are based on a system that predates modern keyboard layouts and internationalization standards, leading to inconsistencies and limited usefulness in contemporary web development.

It’s important to note:

• keyCode is deprecated and is not recommended for new projects. ⚠️
• Use the key and code properties for robust key handling in modern browsers.
• keyCode provides a numerical value based on the specific hardware key and is not always indicative of a character’s value.

Syntax of keyCode

The keyCode property is accessed directly from the KeyboardEvent object:

event.keyCode;

Where:

• event is the KeyboardEvent object passed to the event handler.
• keyCode returns an integer value representing the pressed key.

Practical Examples

Let’s illustrate how the keyCode property works with examples.

Basic keyCode Logging

This example demonstrates how to capture and log the keyCode value when a key is pressed.

<input type="text" id="keyCodeInput" placeholder="Press any key">

<script>
    const inputKeyCode = document.getElementById('keyCodeInput');

    inputKeyCode.addEventListener('keydown', function(event) {
        console.log('Key Code:', event.keyCode);
    });
</script>

Open your browser’s console and press keys in the input field. You’ll see the keyCode value of each key printed in the console.

Displaying Key Codes

This example displays the keyCode value within a designated HTML element.

<input type="text" id="keyCodeDisplayInput" placeholder="Press a key">
<p>Key Code: <span id="keyCodeDisplay"></span></p>

<script>
  const keyCodeDisplayInput = document.getElementById('keyCodeDisplayInput');
  const keyCodeDisplaySpan = document.getElementById('keyCodeDisplay');

  keyCodeDisplayInput.addEventListener('keydown', function(event) {
      keyCodeDisplaySpan.textContent = event.keyCode;
  });
</script>

Pressing keys in the input field will update the displayed keyCode value.

Detecting Special Keys

While not reliable across different keyboard layouts and browsers, you can use keyCode to detect some common special keys. However, keep in mind that this is not the best approach, and the key and code properties are preferable.

<input type="text" id="keyCodeSpecialInput" placeholder="Press a key">
<p id="keyCodeSpecialMessage"></p>

<script>
 const keyCodeSpecialInput = document.getElementById('keyCodeSpecialInput');
  const keyCodeSpecialMessage = document.getElementById('keyCodeSpecialMessage');
  keyCodeSpecialInput.addEventListener('keydown', function(event) {
    if (event.keyCode === 13) {
      keyCodeSpecialMessage.textContent = 'Enter key was pressed.';
    } else if (event.keyCode === 27) {
      keyCodeSpecialMessage.textContent = 'Escape key was pressed.';
    } else {
        keyCodeSpecialMessage.textContent = 'Some other key pressed. KeyCode: ' + event.keyCode;
    }
  });
</script>

Press the Enter or Escape keys to see the corresponding messages.

keyCode vs. key and code

While keyCode provides the numerical code, the key and code properties offer more reliable and standardized information about keyboard events:

• key: Provides the logical character value of the key (e.g., “a”, “Enter”, “Shift”). This is the most user-friendly property, especially when dealing with text input.
• code: Provides the physical key location on the keyboard (e.g., “KeyA”, “Enter”, “ShiftLeft”). This is most useful when capturing specific physical key presses irrespective of the character they represent.

Property	Type	Description
`keyCode`	Number	The numerical key code of the pressed key. Deprecated.
`key`	String	The logical character value of the pressed key.
`code`	String	The physical key location code.

Why is keyCode Deprecated?

The primary reasons for deprecating keyCode are:

• Inconsistencies: Different browsers and operating systems interpret keyCode values inconsistently, leading to cross-browser issues. 😫
• Lack of Internationalization Support: keyCode does not handle various keyboard layouts and languages well.
• Hardware Dependence: keyCode is often based on physical key positions and doesn’t reflect the logical character, making it less intuitive for developers.

When to Avoid keyCode

• Avoid keyCode for new projects. Use the key and code properties instead.
• Avoid relying on specific keyCode values for key detection, as they vary across platforms.
• If you need to reliably capture specific keys for user interaction, use the code property, which identifies physical keys, or the key property for logical character recognition.

Browser Support

Although deprecated, keyCode is supported in most browsers, including older ones. However, its behavior might vary, and it is not recommended for new development.

Conclusion

The keyCode property of the KeyboardEvent object provides a numerical code for the pressed key. While it may seem helpful at first glance, it is a deprecated property that should be avoided in modern web development due to its inconsistencies and limitations. The key and code properties offer much more reliable and flexible ways to handle keyboard events and should be used in any contemporary web project. Always prefer key or code over keyCode. ✅