可视化编辑器的快捷键在输入框里失效怎么办？

你这问题很常见，不是事件冒泡的问题，是输入框本身拦截了键盘事件。当你在 input 或 contenteditable 里输入时，浏览器默认行为会优先处理编辑逻辑，keydown 事件虽然能被捕获，但你的快捷键判断逻辑可能被忽略了，尤其是 Ctrl+C 这种系统级别的快捷键。

根本解法是在 document 层统一监听，但加一层判断：如果当前聚焦的是输入类元素（input、textarea、contenteditable），并且用户没有主动选中文本，才忽略快捷键；如果选中了文本，就放行你的复制逻辑。

不过更实际的做法是：不要完全依赖 document 的 keydown 去做编辑器操作，而是分场景处理。

比如复制粘贴这种，你可以这样改：

document.addEventListener('keydown', (e) => {

  const target = e.target;

  const isInput = ['INPUT', 'TEXTAREA'].includes(target.tagName) || target.isContentEditable;



  // 如果在输入框里，并且没有选中文本，就不管

  if (isInput && !target.value?.substring(target.selectionStart, target.selectionEnd)) {

    return;

  }



  // 有选中内容，或者不在输入框，才触发快捷键

  if (e.ctrlKey && e.key === 'c') {

    e.preventDefault(); // 阻掉浏览器默认复制

    console.log('复制快捷键被触发');

    // 手动执行你的复制逻辑

  }

});

另外，建议把一些核心操作的快捷键绑定到菜单或按钮上，后端处理复制粘贴逻辑时可以用 execCommand 或 Clipboard API 主动控制，而不是被动等事件。

还有个小技巧：可以监听 window 的 blur/focus 来判断用户是否正在输入，结合全局状态管理，比纯 DOM 判断更稳。

总之别用 blur() 强制失焦，太蠢了。做好场景分流，该让输入框自己处理的就让它处理，该抢过来的就 preventDefault + 手动执行。

这问题其实很常见，根本原因不是事件冒泡的问题，而是输入框这类可编辑元素会优先处理自己的快捷键行为。当你在 input 或 contenteditable 里按 Ctrl+C，浏览器默认会先执行复制操作，你的全局监听器虽然能收到事件，但可能已经被输入框“截胡”了。

官方文档里说，key events 的触发顺序是：先触发目标元素的默认行为和事件，然后才冒泡到 document。所以在输入框里按 Ctrl+C，事件确实会触发，但你得确保它没被中途 preventDefault 或者被其他逻辑干扰。

解决办法很简单，别用 keydown 监听全局快捷键，改用 keypress 或更推荐的做法——判断 event.target 是否是输入类元素，然后决定是否响应快捷键。

你应该这样写：

document.addEventListener('keydown', (e) => {

  // 排除输入类元素

  const target = e.target;

  const isInput = ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) || 

                  target.isContentEditable;



  if (isInput) {

    // 在输入框里，只放行某些特定快捷键，比如保存（Ctrl+S）

    if (e.ctrlKey && (e.key === 's' || e.key === 'S')) {

      e.preventDefault();

      console.log('保存快捷键被捕获');

      // 执行保存逻辑

      return;

    }

    // 其他快捷键如 Ctrl+C 就让它走浏览器默认复制

    return;

  }



  // 不在输入框里，正常处理所有快捷键

  if (e.ctrlKey && e.key === 'c') {

    e.preventDefault(); // 阻止默认复制，走自定义逻辑

    console.log('复制快捷键被触发');

    // 自定义复制逻辑

  }

});

关键点：
- 要主动判断 event.target 是不是输入元素
- 对于像 Ctrl+C/Ctrl+V 这种系统级快捷键，在输入框里最好别拦截，除非你真的要重写复制粘贴逻辑
- 如果你真想在输入框里也能触发编辑器命令，建议用别的组合键，比如 Ctrl+Shift+C 之类的，避免和原生冲突

另外，别用 blur() 强行失焦，用户肯定骂你。这种属于杀敌八百自损一千的操作，完全没必要。