w
Documentation Core Tools Keycode Info

KeyboardEvent API Reference

The Keycode Info tool is built on the standard JavaScript KeyboardEvent API. Here's a comprehensive reference for developers.

KeyboardEvent Properties

Core Properties

key

The key value of the key represented by the event.

event.key; // "a", "Enter", "Shift", " "

Values:

  • Character keys: "a", "b", "1", "2", etc.
  • Special keys: "Enter", "Tab", "Escape", "Backspace"
  • Modifier keys: "Shift", "Control", "Alt", "Meta"
  • Whitespace: " " (space), "Tab", "Enter"

code

The physical key on the keyboard.

event.code; // "KeyA", "Enter", "ShiftLeft", "Space"

Common codes:

  • Letter keys: "KeyA", "KeyB", "KeyC", etc.
  • Number keys: "Digit0", "Digit1", "Digit2", etc.
  • Function keys: "F1", "F2", "F3", etc.
  • Arrow keys: "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"
  • Modifier keys: "ShiftLeft", "ShiftRight", "ControlLeft", "ControlRight"

keyCode (Deprecated)

The numeric code of the key.

event.keyCode; // 65 for "A", 13 for "Enter"

Note: This property is deprecated but still widely supported.

location

The location of the key on the keyboard.

event.location; // 0, 1, 2, or 3

Values:

  • 0: Standard key location
  • 1: Left side of keyboard
  • 2: Right side of keyboard
  • 3: Numpad

Modifier Properties

ctrlKey

Whether the Ctrl key was pressed.

event.ctrlKey; // true or false

altKey

Whether the Alt key was pressed.

event.altKey; // true or false

shiftKey

Whether the Shift key was pressed.

event.shiftKey; // true or false

metaKey

Whether the Meta key was pressed (Cmd on Mac, Windows key on Windows).

event.metaKey; // true or false

Event Types

keydown

Fired when a key is pressed down.

document.addEventListener('keydown', (event) => {
  console.log('Key pressed:', event.key);
});

keyup

Fired when a key is released.

document.addEventListener('keyup', (event) => {
  console.log('Key released:', event.key);
});

keypress (Deprecated)

Fired when a key is pressed (deprecated).

// Deprecated - use keydown instead
document.addEventListener('keypress', (event) => {
  console.log('Key pressed:', event.key);
});

Common Key Codes

Letter Keys

KeykeyCodecode
A65KeyA
B66KeyB
C67KeyC
.........
Z90KeyZ

Number Keys

KeykeyCodecode
048Digit0
149Digit1
250Digit2
.........
957Digit9

Special Keys

KeykeyCodecode
Enter13Enter
Tab9Tab
Escape27Escape
Backspace8Backspace
Delete46Delete
Space32Space

Arrow Keys

KeykeyCodecode
Up38ArrowUp
Down40ArrowDown
Left37ArrowLeft
Right39ArrowRight

Function Keys

KeykeyCodecode
F1112F1
F2113F2
F3114F3
.........
F12123F12

Modifier Keys

KeykeyCodecode
Shift16ShiftLeft/ShiftRight
Ctrl17ControlLeft/ControlRight
Alt18AltLeft/AltRight
Meta91/93MetaLeft/MetaRight

Browser Compatibility

Modern Browsers

  • Chrome 51+: Full support
  • Firefox 23+: Full support
  • Safari 10+: Full support
  • Edge 79+: Full support

Legacy Browsers

  • Internet Explorer: Limited support
  • Older Safari: Partial support
  • Older Firefox: Partial support

Usage Examples

Basic Key Detection

document.addEventListener('keydown', (event) => {
  console.log('Key:', event.key);
  console.log('Code:', event.code);
  console.log('KeyCode:', event.keyCode);
  console.log('Location:', event.location);
});

Modifier Key Detection

document.addEventListener('keydown', (event) => {
  if (event.ctrlKey && event.key === 'c') {
    console.log('Ctrl+C pressed');
  }

  if (event.altKey && event.shiftKey) {
    console.log('Alt+Shift combination');
  }
});

Key Combination Detection

document.addEventListener('keydown', (event) => {
  const modifiers = [];
  if (event.ctrlKey) modifiers.push('Ctrl');
  if (event.altKey) modifiers.push('Alt');
  if (event.shiftKey) modifiers.push('Shift');
  if (event.metaKey) modifiers.push('Meta');

  console.log('Modifiers:', modifiers.join('+'));
  console.log('Key:', event.key);
});

Prevent Default Behavior

document.addEventListener('keydown', (event) => {
  if (event.key === 'F12') {
    event.preventDefault(); // Prevent developer tools
  }

  if (event.ctrlKey && event.key === 's') {
    event.preventDefault(); // Prevent save dialog
  }
});

Tool Integration

Using with Keycode Info Tool

The Keycode Info tool provides a visual interface for understanding these APIs:

// Example: Integrate with the tool
document.addEventListener('keydown', (event) => {
  // Display in tool
  displayKeyInfo({
    key: event.key,
    code: event.code,
    keyCode: event.keyCode,
    location: event.location,
    modifiers: getModifiers(event),
  });
});

function getModifiers(event) {
  const modifiers = [];
  if (event.ctrlKey) modifiers.push('Ctrl');
  if (event.altKey) modifiers.push('Alt');
  if (event.shiftKey) modifiers.push('Shift');
  if (event.metaKey) modifiers.push('Meta');
  return modifiers.join(' + ') || 'None';
}

Best Practices

Event Handling

  1. Use keydown for most cases: Better for detecting key presses
  2. Use keyup for release detection: When you need to detect key release
  3. Avoid keypress: Deprecated and inconsistent

Key Detection

  1. Use code for physical keys: More reliable for key detection
  2. Use key for character input: Better for text input
  3. Check modifiers: Always check modifier key states

Performance

  1. Debounce events: For rapid key presses
  2. Remove listeners: Clean up event listeners
  3. Use passive listeners: When possible for better performance

Troubleshooting

Common Issues

Key Not Detected

// Check if element is focused
if (document.activeElement === document.body) {
  console.log('Page is focused');
}

Inconsistent Behavior

// Use code instead of key for consistency
if (event.code === 'KeyA') {
  console.log('A key pressed');
}

Modifier Key Issues

// Check modifier state
if (event.ctrlKey && event.shiftKey) {
  console.log('Ctrl+Shift combination');
}

This API reference provides the foundation for understanding and implementing keyboard event handling in web applications. Use the Keycode Info tool to explore and test these APIs interactively.

Was this page helpful?