按下Ctrl+A组合键松开后能否检测后续按下的Backspace键？

核心实现思路 #

通过状态标记跟踪按键流程，不需要引入额外按键序列库，仅用3个状态位就能精准识别完整操作：

• 用集合实时记录当前处于按下状态的按键，避免按键漏判、错判
• 标记是否触发过Ctrl+A（Mac端兼容Cmd+A）组合键按下动作
• 标记Ctrl+A组合的两个按键是否已经完全松开，进入等待Backspace的就绪状态
• 就绪状态下如果按下Ctrl、A之外的其他按键，直接重置状态，避免误判

可直接复用的实现代码 #

// 状态初始化
const pressedKeys = new Set();
let hasCtrlAPressed = false;
let waitForBackspace = false;
// 替换为实际的编辑器DOM节点，iframe嵌套的富文本编辑器需绑定到iframe内部document
const editorEl = document.querySelector('.your-text-editor-selector');

editorEl.addEventListener('keydown', (e) => {
  const key = e.key.toLowerCase();
  pressedKeys.add(key);

  // 识别Ctrl+A / Cmd+A组合按下
  if ((e.ctrlKey || e.metaKey) && key === 'a') {
    hasCtrlAPressed = true;
    waitForBackspace = false;
    return;
  }

  // 匹配目标操作：就绪状态下按下Backspace，且当前没有按住Ctrl/Cmd
  if (key === 'backspace' && waitForBackspace && !e.ctrlKey && !e.metaKey) {
    // 拦截默认事件，解决默认行为引发的功能异常
    e.preventDefault();
    // 此处写入自定义业务逻辑
    console.log('已捕获全选松开后按退格的操作');
    // 逻辑执行完成后重置状态
    waitForBackspace = false;
    hasCtrlAPressed = false;
    return;
  }

  // 就绪状态下按了Ctrl、A之外的任意按键，直接重置状态，避免误判
  if (waitForBackspace && !['control', 'a', 'meta'].includes(key)) {
    waitForBackspace = false;
    hasCtrlAPressed = false;
  }
});

editorEl.addEventListener('keyup', (e) => {
  const key = e.key.toLowerCase();
  pressedKeys.delete(key);

  // 之前按过Ctrl+A，且当前Ctrl/Cmd/A三个键全部松开，进入等待Backspace的就绪状态
  if (
    hasCtrlAPressed &&
    !pressedKeys.has('control') &&
    !pressedKeys.has('meta') &&
    !pressedKeys.has('a')
  ) {
    waitForBackspace = true;
    hasCtrlAPressed = false;
  }
});

// 编辑器失焦时重置所有状态，避免切窗口、切应用导致的按键状态错乱
editorEl.addEventListener('blur', () => {
  pressedKeys.clear();
  hasCtrlAPressed = false;
  waitForBackspace = false;
});

边界处理说明 #

• 兼容Mac系统的Cmd+A全选逻辑，不会出现Windows端正常、Mac端失效的问题
• 编辑器失焦时自动清空所有按键状态，避免状态残留导致的误判
• 全选后如果按了方向键、输入任意字符、触发其他功能键，会直接退出等待状态，不会把后续的Backspace误判为目标操作
• 捕获到目标操作时第一时间调用e.preventDefault()拦截浏览器默认行为，可直接解决默认事件引发的功能异常问题

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