Keyboard Events — JavaScript Keyboard Event Handling

In this tutorial, you will learn about Keyboard Events. We cover key concepts, practical examples, and best practices to help you master this topic.

JavaScript keyboard event handling uses keydown, keyup, and keypress events with event.key for modern implementations, including modifier key detection and platform-specific handling.

In this tutorial, you'll learn Keyboard Navigation event handling in JavaScript.

What You'll Learn

By the end of this lesson, you'll understand the three keyboard events, the difference between event.key and event.code, modifier key handling, and how to prevent default browser behavior.

Why It Matters

Correct keyboard event handling is essential for custom widgets. Incorrect handling breaks keyboard navigation for all users.

Real-World Use

Doda Browser's custom components use keydown events with event.key for all keyboard interactions.

Keyboard Event Types

flowchart TD
  A[Keyboard Events] --> B[keydown]
  A --> C[keypress]
  A --> D[keyup]
  B --> E[Fired when key pressed]
  D --> F[Fired when key released]
  C --> G[Deprecated, avoid using]
  B --> H[Best for interactions]
  D --> I[Best for state tracking]

Event.key vs Event.code

// event.key: the character or key name
// 'a', 'A', 'Enter', 'ArrowRight', 'Escape', 'Tab'

// event.code: the physical key location
// 'KeyA', 'Digit1', 'Enter', 'ArrowRight'

// Use event.key for logical key handling
document.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    activateElement(event.target);
  }
  if (event.key === 'Escape') {
    closeDialog();
  }
  if (event.key === 'ArrowRight') {
    navigateNext();
  }
});

Modifier Key Detection

document.addEventListener('keydown', (event) => {
  // Check modifier keys
  const mods = {
    ctrl: event.ctrlKey,
    shift: event.shiftKey,
    alt: event.altKey,
    meta: event.metaKey
  };

  if (mods.ctrl && event.key === 's') {
    event.preventDefault();
    saveDocument();
  }

  if (mods.ctrl && mods.shift && event.key === 'S') {
    event.preventDefault();
    saveAs();
  }
});

Prevent Default Behavior

Always call preventDefault when handling a key that has default browser behavior:

element.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'ArrowUp':
    case 'ArrowDown':
      event.preventDefault(); // Prevent page scrolling
      navigateItems(event.key);
      break;
    case 'Enter':
    case ' ':
      event.preventDefault(); // Prevent click if handled
      activateItem();
      break;
  }
});

Common Mistakes

• Using keypress event: Deprecated and does not fire for all keys.
• Using event.keyCode or event.which: Deprecated. Use event.key instead.
• Not preventing default when handling a key: Browser may perform both actions.
• Handling keys on the wrong element: Use event delegation for dynamic content.
• Not checking if the event target is an input: Single-key shortcuts should not fire when typing.

Practice and Challenge

1. What is the difference between event.key and event.code? event.key is the logical key value. event.code is the physical key location.

2. Which keyboard event is best for interaction handling? keydown.

3. What property checks if Ctrl is pressed? event.ctrlKey.

4. Why should you avoid event.keyCode? It is deprecated. Use event.key instead.

5. Challenge: Implement keyboard navigation for a custom listbox. Use keydown with proper modifiers and preventDefault calls.

FAQ

Mini Project

Create a custom dropdown that opens with Enter or Space and closes with Escape. Use keydown with event.key and proper preventDefault calls.

What's Next

Continue to Keyboard Testing to learn about manual and automated keyboard testing.