Why keyCode is Deprecated

Why Was keyCode Deprecated?

The problems that led to deprecation:

1️⃣ Poor Readability

Numeric codes are hard to read and maintain. What does 65 mean? You have to look it up every time.

// ❌ Hard to understand
if (e.keyCode === 65) { }

// ✅ Self-documenting
if (e.key === 'a') { }

2️⃣ Inconsistent Across Browsers

Different browsers sometimes returned different codes for the same key, especially for special keys and non-English keyboards.

3️⃣ Poor International Support

keyCode was designed for US keyboards and doesn't work well with international keyboard layouts, special characters, or different alphabets.

4️⃣ Limited Information

Can't distinguish between left and right modifier keys (Shift, Ctrl, Alt) or provide information about the actual character produced.

5️⃣ No Standardization

Never properly standardized. The mapping of keys to codes varied, and there was no official specification.

Migration Guide

Common keyCode Replacements

Before & After Examples

Example 1: Enter key detection

// ❌ Old way (deprecated)
document.addEventListener('keydown', (e) => {
  if (e.keyCode === 13) {
    submitForm();
  }
});

// ✅ New way
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    submitForm();
  }
});

Example 2: Arrow keys navigation

// ❌ Old way (deprecated)
document.addEventListener('keydown', (e) => {
  if (e.keyCode === 37) moveLeft();
  if (e.keyCode === 38) moveUp();
  if (e.keyCode === 39) moveRight();
  if (e.keyCode === 40) moveDown();
});

// ✅ New way
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') moveLeft();
  if (e.key === 'ArrowUp') moveUp();
  if (e.key === 'ArrowRight') moveRight();
  if (e.key === 'ArrowDown') moveDown();
});

Example 3: Letter key detection

// ❌ Old way (deprecated)
document.addEventListener('keydown', (e) => {
  if (e.keyCode >= 65 && e.keyCode <= 90) {
    console.log('Letter key pressed');
  }
});

// ✅ New way
document.addEventListener('keydown', (e) => {
  if (e.key.length === 1 && e.key.match(/[a-z]/i)) {
    console.log('Letter key pressed');
  }
});

Browser Support

const key = e.key || e.keyCode;
if (key === 'Enter' || key === 13) {
  // Handle Enter key
}

Frequently Asked Questions

Will keyCode stop working in browsers?

Probably not soon, for backwards compatibility. However, it's officially deprecated and could be removed in future browser versions. It's best to migrate now.

Should I use event.key or event.code?

Use event.key for most cases (form handling, text input). Use event.code for game controls or when you need to detect physical key position regardless of layout.

Can I use both for backwards compatibility?

Yes, you can feature-detect and fall back, but it's usually not necessary unless supporting very old browsers. All modern browsers support event.key and event.code.

Related Guides

• keyCode vs key vs code - Understanding the three keyboard event properties
• Arrow Keys Guide - Modern approach to arrow key detection
• Interactive KeyCode Reference - Test keys and see their codes in real-time