Special Keys Guide

Modifier Keys Quick Reference

Detecting Modifier Keys

Method 1: Using Boolean Properties (Recommended)

The easiest way to detect modifier keys is using the boolean properties:

document.addEventListener('keydown', (e) => {
  if (e.ctrlKey) {
    console.log('Ctrl is pressed');
  }
  if (e.altKey) {
    console.log('Alt is pressed');
  }
  if (e.shiftKey) {
    console.log('Shift is pressed');
  }
  if (e.metaKey) {
    console.log('Meta (Command/Windows) is pressed');
  }
});

Method 2: Detecting the Key Itself

You can also detect when the modifier key itself is pressed:

document.addEventListener('keydown', (e) => {
  if (e.key === 'Control') {
    console.log('Ctrl key pressed');
  }
  if (e.key === 'Alt') {
    console.log('Alt key pressed');
  }
  if (e.key === 'Shift') {
    console.log('Shift key pressed');
  }
  if (e.key === 'Meta') {
    console.log('Meta key pressed');
  }
});

Keyboard Shortcuts

Common Shortcuts (Ctrl/Cmd + Key)

document.addEventListener('keydown', (e) => {
  // Ctrl+S or Cmd+S - Save
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }

  // Ctrl+C or Cmd+C - Copy
  if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
    console.log('Copy shortcut');
  }

  // Ctrl+V or Cmd+V - Paste
  if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
    console.log('Paste shortcut');
  }

  // Ctrl+Z or Cmd+Z - Undo
  if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
    e.preventDefault();
    undo();
  }
});

Multiple Modifiers

Detecting multiple modifier keys together:

document.addEventListener('keydown', (e) => {
  // Ctrl+Shift+S - Save As
  if (e.ctrlKey && e.shiftKey && e.key === 's') {
    e.preventDefault();
    saveAs();
  }

  // Ctrl+Alt+Delete (Windows)
  if (e.ctrlKey && e.altKey && e.key === 'Delete') {
    console.log('Ctrl+Alt+Delete pressed');
  }

  // Shift+Alt+F - Format Document
  if (e.shiftKey && e.altKey && e.key === 'f') {
    formatDocument();
  }
});

Selection with Shift

Shift is commonly used for text/item selection:

// Text selection in custom editor
document.addEventListener('keydown', (e) => {
  if (e.shiftKey && e.key === 'ArrowRight') {
    e.preventDefault();
    extendSelectionRight();
  }

  if (e.shiftKey && e.key === 'ArrowLeft') {
    e.preventDefault();
    extendSelectionLeft();
  }

  // Shift+Click for range selection
  if (e.shiftKey && e.target.matches('.selectable-item')) {
    selectRange(lastSelected, e.target);
  }
});

Alt Key for Menus

Alt key is traditionally used for menu access:

document.addEventListener('keydown', (e) => {
  // Alt+F - File menu
  if (e.altKey && e.key === 'f') {
    e.preventDefault();
    openFileMenu();
  }

  // Alt+E - Edit menu
  if (e.altKey && e.key === 'e') {
    e.preventDefault();
    openEditMenu();
  }

  // Alt+Arrow for navigation
  if (e.altKey && e.key === 'ArrowLeft') {
    navigateBack();
  }
  if (e.altKey && e.key === 'ArrowRight') {
    navigateForward();
  }
});

Preventing Default Behavior

Always prevent default behavior for custom shortcuts:

document.addEventListener('keydown', (e) => {
  // Prevent browser from opening print dialog
  if ((e.ctrlKey || e.metaKey) && e.key === 'p') {
    e.preventDefault();
    customPrint();
  }

  // Prevent browser find dialog
  if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
    e.preventDefault();
    customFind();
  }
});

Distinguishing Left vs Right

Use event.code to distinguish between left and right modifier keys:

document.addEventListener('keydown', (e) => {
  if (e.code === 'ShiftLeft') {
    console.log('Left Shift pressed');
  }
  if (e.code === 'ShiftRight') {
    console.log('Right Shift pressed');
  }

  if (e.code === 'ControlLeft') {
    console.log('Left Ctrl pressed');
  }
  if (e.code === 'ControlRight') {
    console.log('Right Ctrl pressed');
  }
});

Common Keyboard Shortcut Patterns

Text Editing

• Ctrl/Cmd + Z - Undo
• Ctrl/Cmd + Y or Ctrl/Cmd + Shift + Z - Redo
• Ctrl/Cmd + X - Cut
• Ctrl/Cmd + C - Copy
• Ctrl/Cmd + V - Paste
• Ctrl/Cmd + A - Select All
• Ctrl/Cmd + F - Find

Document Actions

• Ctrl/Cmd + S - Save
• Ctrl/Cmd + Shift + S - Save As
• Ctrl/Cmd + P - Print
• Ctrl/Cmd + N - New Document
• Ctrl/Cmd + O - Open

Navigation

• Alt + Arrow Left - Back
• Alt + Arrow Right - Forward
• Ctrl/Cmd + Tab - Next Tab
• Ctrl/Cmd + Shift + Tab - Previous Tab

Cross-Platform Considerations

Mac vs Windows/Linux

// Detect operating system
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;

document.addEventListener('keydown', (e) => {
  // Use appropriate modifier key
  const modifierKey = isMac ? e.metaKey : e.ctrlKey;

  if (modifierKey && e.key === 's') {
    e.preventDefault();
    save();
  }
});

Display Shortcuts to Users

// Show appropriate shortcut hint to user
const getShortcutText = (key) => {
  const modifier = isMac ? '⌘' : 'Ctrl';
  return `${modifier}+${key.toUpperCase()}`;
};

// Usage: "⌘+S" on Mac, "Ctrl+S" on Windows
console.log(getShortcutText('s')); // Save shortcut

Browser Compatibility

All modifier key properties are supported in:

• ✅ All modern browsers
• ✅ Chrome, Firefox, Safari, Edge
• ✅ Mobile browsers (for bluetooth keyboards)

Related Guides

• keyCode vs key vs code - Understanding keyboard event properties
• Arrow Keys Guide - Complete arrow key handling guide
• Interactive KeyCode Reference - Test modifier keys in real-time