Cross-browser get keyCode

Cross-browser `keyCode` in JavaScript

Introduction

In JavaScript, the `keyCode` property of a keyboard event provides information about the key that was pressed. However, obtaining reliable `keyCode` values across different browsers can be tricky due to inconsistencies in their implementation.

Understanding the Problem

The `keyCode` property was initially designed for identifying specific keys, like Enter, Space, or Arrow keys. But the challenge arises with non-standard characters and keys. Different browsers might assign varying `keyCode` values for the same character or key.

Solutions

1. Using `key` Property

Modern browsers introduce the `key` property, which offers a more reliable and consistent way to identify keys.

document.addEventListener('keydown', function(event) {
  console.log(event.key); // Outputs the pressed key's representation
});

// Output in most modern browsers:
//  'a' for letter 'a'
//  'Enter' for the Enter key
//  'ArrowUp' for the Up arrow key

2. Normalizing `keyCode` Values

You can use a normalization approach to ensure consistent `keyCode` values across browsers.

function normalizeKeyCode(keyCode) {
  if (keyCode >= 96 && keyCode <= 105) { // Number keys on the numeric keypad
    return keyCode - 48;
  } else if (keyCode >= 65 && keyCode <= 90) { // Letters
    return keyCode;
  } else {
    return keyCode; // Handle other keys as needed
  }
}

3. Using `key` as a Fallback

You can use the `key` property as a fallback in case the `keyCode` property doesn't provide the expected result.

function getKeyCode(event) {
  let keyCode = event.keyCode;
  if (event.key && event.key.length === 1) {
    keyCode = event.key.charCodeAt(0);
  }
  return keyCode;
}

Comparison Table

Conclusion

When working with `keyCode` values in JavaScript, it's crucial to be aware of the potential inconsistencies across different browsers. Employing modern methods like the `key` property, normalization techniques, or using a fallback strategy can greatly improve the reliability and consistency of your code.