keyboardEventKeys

Prefer KeyboardEvent.key over deprecated properties like keyCode, charCode, and which.

✅ This rule is included in the browser logical preset.

The deprecated KeyboardEvent properties keyCode, charCode, and which provide numeric codes that are less readable and harder to maintain than the modern .key property. The .key property returns a string representation of the key pressed, making code more semantic and accessible.

Examples

❌ Incorrect

window.addEventListener("keydown", (event) => {
  if (event.keyCode === 13) {
    console.log("Enter pressed");
  }
});

document.addEventListener("keypress", (event) => {
  console.log(event.charCode);
});

window.addEventListener("keyup", (event) => {
  console.log(event.which);
});

✅ Correct

window.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    console.log("Enter pressed");
  }
});

document.addEventListener("keypress", (event) => {
  console.log(event.key);
});

window.addEventListener("keyup", (event) => {
  console.log(event.key);
});

Options

This rule is not configurable.

When Not To Use It

If you need to support very old browsers that do not implement KeyboardEvent.key (Internet Explorer 8 and below), you might need to continue using the deprecated properties. However, for modern web development, the .key property is widely supported and recommended.

Further Reading

• MDN: KeyboardEvent.key
• MDN: KeyboardEvent.keyCode (deprecated)
• MDN: KeyboardEvent.charCode (deprecated)

Equivalents in Other Linters

• ESLint: unicorn/prefer-keyboard-event-key