如何使用纯JavaScript添加多按键组合事件监听器实现Ctrl+I快捷键？

核心实现代码 #

直接监听全局keydown事件，通过事件对象内置的修饰键属性判断组合键状态即可：

// 替换为你实际的自动整理按钮选择器
const formatCodeBtn = document.querySelector('#brainf-format-btn');

document.addEventListener('keydown', (e) => {
  // 判断是否同时按下Ctrl和I键
  if (e.ctrlKey && e.key.toLowerCase() === 'i') {
    // 阻止浏览器默认的Ctrl+I行为（触发书签面板）
    e.preventDefault();
    // 触发按钮点击，也可以直接调用你实现的代码整理函数
    formatCodeBtn?.click();
  }
});

关键逻辑说明 #

• e.ctrlKey是事件原生布尔属性，按下Ctrl键时自动为true，同类属性还有e.shiftKey/e.altKey/e.metaKey（对应Mac的Command键），可用于实现其他组合快捷键
• 加入toLowerCase()处理是为了兼容大小写锁定开启的场景，避免快捷键失效
• 必须调用e.preventDefault()，否则浏览器原生快捷键会优先触发，你的自定义逻辑不会生效
• 如果你的编辑器运行在iframe或Shadow DOM中，需要将事件监听绑定到对应的容器节点上，不要绑定到全局document

通用快捷键注册工具（可选） #

如果后续需要添加更多组合快捷键，可以封装为通用注册函数：

function registerShortcut(modifier, key, callback) {
  document.addEventListener('keydown', (e) => {
    const isModifierPressed = 
      (modifier === 'ctrl' && e.ctrlKey) ||
      (modifier === 'shift' && e.shiftKey) ||
      (modifier === 'alt' && e.altKey) ||
      (modifier === 'meta' && e.metaKey);
    
    if (isModifierPressed && e.key.toLowerCase() === key.toLowerCase()) {
      e.preventDefault();
      callback();
    }
  });
}

// 调用示例
registerShortcut('ctrl', 'i', () => {
  document.querySelector('#brainf-format-btn').click();
});

内容的提问来源于stack exchange，提问作者Ruthvik