Building Keyboard Shortcuts in JavaScript

Cross-Platform Modifier Detection

// Utility function for cross-platform modifier detection
function getPlatformModifier() {
  const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
  return isMac ? 'metaKey' : 'ctrlKey';
}

// Usage
document.addEventListener('keydown', (event) => {
  const modifier = getPlatformModifier();
  
  if (event[modifier] && event.key === 'k') {
    event.preventDefault();
    openCommandPalette();
  }
});

Sequential Key Combinations (Vim-style)

class SequentialShortcutManager {
  constructor() {
    this.sequence = [];
    this.timeout = null;
    this.shortcuts = new Map();
  }
  
  register(keys, handler) {
    this.shortcuts.set(keys, handler);
  }
  
  handleKeydown(event) {
    // Clear timeout on new key
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
    
    // Add key to sequence
    const key = this.getKeyString(event);
    this.sequence.push(key);
    
    // Check for match
    const sequenceStr = this.sequence.join(' ');
    
    // Check if any shortcut starts with current sequence
    let hasPartialMatch = false;
    for (const [shortcut, handler] of this.shortcuts) {
      if (shortcut === sequenceStr) {
        event.preventDefault();
        handler();
        this.reset();
        return;
      }
      if (shortcut.startsWith(sequenceStr)) {
        hasPartialMatch = true;
      }
    }
    
    // Set timeout to clear sequence
    if (hasPartialMatch) {
      this.timeout = setTimeout(() => this.reset(), 1000);
    } else {
      this.reset();
    }
  }
  
  getKeyString(event) {
    const parts = [];
    if (event.ctrlKey) parts.push('ctrl');
    if (event.metaKey) parts.push('meta');
    if (event.altKey) parts.push('alt');
    if (event.shiftKey) parts.push('shift');
    parts.push(event.key.toLowerCase());
    return parts.join('+');
  }
  
  reset() {
    this.sequence = [];
    if (this.timeout) {
      clearTimeout(this.timeout);
      this.timeout = null;
    }
  }
}

// Usage
const shortcutManager = new SequentialShortcutManager();

// Register g → g to go to top
shortcutManager.register('g g', () => {
  window.scrollTo(0, 0);
});

// Register g → h to go home
shortcutManager.register('g h', () => {
  window.location.href = '/';
});

document.addEventListener('keydown', (e) => {
  shortcutManager.handleKeydown(e);
});

Complete Shortcut Manager Implementation

class ShortcutManager {
  constructor() {
    this.shortcuts = new Map();
    this.contexts = new Map();
    this.activeContexts = new Set(['global']);
    this.sequence = [];
    this.sequenceTimeout = null;
    this.enabled = true;
    
    this.init();
  }
  
  init() {
    document.addEventListener('keydown', (e) => this.handleKeydown(e));
  }
  
  register(shortcut, handler, options = {}) {
    const {
      context = 'global',
      description = '',
      preventDefault = true,
      allowInInput = false
    } = options;
    
    if (!this.shortcuts.has(context)) {
      this.shortcuts.set(context, new Map());
    }
    
    this.shortcuts.get(context).set(shortcut, {
      handler,
      description,
      preventDefault,
      allowInInput
    });
  }
  
  handleKeydown(event) {
    if (!this.enabled) return;
    
    // Skip if typing in input/textarea (unless allowed)
    const target = event.target;
    const isInput = ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName);
    
    const key = this.getKeyString(event);
    
    // Add to sequence
    this.sequence.push(key);
    if (this.sequenceTimeout) clearTimeout(this.sequenceTimeout);
    
    // Try to match shortcuts
    const sequenceStr = this.sequence.join(' ');
    let matched = false;
    let hasPartialMatch = false;
    
    // Check all active contexts
    for (const context of this.getActiveContextsInOrder()) {
      const contextShortcuts = this.shortcuts.get(context);
      if (!contextShortcuts) continue;
      
      for (const [shortcut, config] of contextShortcuts) {
        if (shortcut === sequenceStr) {
          if (!isInput || config.allowInInput) {
            if (config.preventDefault) {
              event.preventDefault();
            }
            config.handler(event);
            matched = true;
            this.resetSequence();
            return;
          }
        }
        if (shortcut.startsWith(sequenceStr + ' ')) {
          hasPartialMatch = true;
        }
      }
    }
    
    // Set timeout for sequences
    if (hasPartialMatch) {
      this.sequenceTimeout = setTimeout(() => this.resetSequence(), 800);
    } else if (!matched) {
      this.resetSequence();
    }
  }
  
  getKeyString(event) {
    const parts = [];
    
    // Order matters for consistency
    if (event.ctrlKey) parts.push('ctrl');
    if (event.metaKey) parts.push('meta');
    if (event.altKey) parts.push('alt');
    if (event.shiftKey) parts.push('shift');
    
    // Normalize key names
    let key = event.key;
    if (key.length === 1) {
      key = key.toLowerCase();
    }
    
    parts.push(key);
    return parts.join('+');
  }
  
  resetSequence() {
    this.sequence = [];
    if (this.sequenceTimeout) {
      clearTimeout(this.sequenceTimeout);
      this.sequenceTimeout = null;
    }
  }
  
  getActiveContextsInOrder() {
    // Priority order (highest to lowest)
    const priority = ['modal', 'dialog', 'form', 'editor', 'global'];
    return priority.filter(ctx => this.activeContexts.has(ctx));
  }
  
  activateContext(context) {
    this.activeContexts.add(context);
  }
  
  deactivateContext(context) {
    this.activeContexts.delete(context);
  }
  
  disable() {
    this.enabled = false;
  }
  
  enable() {
    this.enabled = true;
  }
  
  getAllShortcuts() {
    const all = [];
    for (const [context, shortcuts] of this.shortcuts) {
      for (const [shortcut, config] of shortcuts) {
        all.push({
          shortcut,
          context,
          description: config.description
        });
      }
    }
    return all;
  }
}

// Initialize and use
const shortcuts = new ShortcutManager();

// Register shortcuts with descriptions
shortcuts.register('ctrl+s', () => saveDocument(), {
  description: 'Save document',
  context: 'editor'
});

shortcuts.register('ctrl+shift+p', () => openCommandPalette(), {
  description: 'Open command palette',
  context: 'global'
});

shortcuts.register('g g', () => scrollToTop(), {
  description: 'Go to top',
  context: 'global',
  allowInInput: false
});

// Export for use in other modules
export default shortcuts;

Next Steps

• • Implement a basic shortcut manager in your application
• • Add context awareness to prevent conflicts
• • Create a help dialog showing all available shortcuts
• • Test thoroughly across different platforms and browsers