如何在JavaScript中实现序列式键盘快捷键？

我完全懂你想要的效果——就像AutoHotkey里的序列热键那样，先按Shift+S，紧接着再按S来触发指定操作。刚好我有几个可行的方案，不管是用你找到的hotkeys库，还是原生JavaScript，甚至换个更适配的库都能搞定，下面一步步说：

方法一：用hotkeys库结合状态跟踪 #

hotkeys本身没有直接支持序列快捷键的API，但我们可以自己维护一个状态变量来记录用户是否已经按下过Shift+S，再配合监听后续的S按键就能实现。

代码示例：

// 标记是否刚按下过Shift+S
let hasPressedShiftS = false;
let resetTimeout = null;

// 监听Shift+S组合键
hotkeys('shift+s', function(event) {
  event.preventDefault();
  // 更新状态为已触发
  hasPressedShiftS = true;
  // 清除之前的超时，避免重复计时
  if (resetTimeout) clearTimeout(resetTimeout);
  // 2秒内没按S就重置状态，防止一直处于等待状态
  resetTimeout = setTimeout(() => {
    hasPressedShiftS = false;
  }, 2000);
});

// 监听单独的S按键
hotkeys('s', function(event) {
  // 只有当之前触发过Shift+S，且这次没按Shift时才执行动作
  if (hasPressedShiftS && !event.shiftKey) {
    event.preventDefault();
    // 这里写你要触发的逻辑
    console.log('序列快捷键触发：Shift+S -> S');
    // 执行完后重置状态
    hasPressedShiftS = false;
    clearTimeout(resetTimeout);
  }
});

关键细节：

• 加超时重置是为了避免用户误触Shift+S后，后续随便按S都触发动作
• 记得判断!event.shiftKey，防止Shift+S本身重复触发逻辑

方法二：原生JavaScript实现（无依赖） #

如果不想引入第三方库，原生JS也能轻松实现，逻辑和上面一致：

let hasPressedShiftS = false;
let resetTimeout = null;

document.addEventListener('keydown', function(event) {
  // 检测Shift+S组合键
  if (event.shiftKey && event.key.toLowerCase() === 's') {
    event.preventDefault();
    hasPressedShiftS = true;
    if (resetTimeout) clearTimeout(resetTimeout);
    resetTimeout = setTimeout(() => {
      hasPressedShiftS = false;
    }, 2000);
  } 
  // 检测单独的S按键，且之前触发过Shift+S
  else if (!event.shiftKey && event.key.toLowerCase() === 's' && hasPressedShiftS) {
    event.preventDefault();
    console.log('序列快捷键触发：Shift+S -> S');
    hasPressedShiftS = false;
    clearTimeout(resetTimeout);
  }
});

方法三：用原生支持序列快捷键的库 #

如果觉得自己维护状态太麻烦，可以换用原生支持序列快捷键的库，比如Mousetrap，它直接提供了序列绑定的API：

// 直接定义序列：先按shift+s，再按s
Mousetrap.bind(['shift+s', 's'], function() {
  // 执行你的目标动作
  console.log('序列快捷键触发');
  return false;
}, 'keydown');

它会自动帮你处理状态跟踪、超时逻辑，甚至支持更长的序列（比如Ctrl+A -> B -> C），非常省心。

额外注意事项 #

• 如果在输入框、文本域等可编辑元素中使用，建议判断当前焦点是否在这些元素内，避免干扰正常输入
• 超时时间可以根据需求调整，比如1秒或3秒，平衡灵敏度和容错性

内容的提问来源于stack exchange，提问作者丶 Limeー来夢 丶