如何阻止在<input>元素外触发的undo/redo事件

要彻底阻止目标输入框的Undo/Redo操作（包括失焦后按下快捷键触发的情况），同时不影响其他输入元素，可以通过拦截聚焦时的输入事件+全局快捷键监听+编辑历史追踪的组合方案实现：

实现步骤 #

1. 拦截输入框聚焦时的Undo/Redo：保留聚焦状态下的撤销/重做拦截逻辑，处理输入框处于焦点时的操作。
2. 追踪最近编辑的元素：记录页面中最后被编辑的元素，用来判断全局快捷键是否会作用于目标输入框。
3. 拦截全局快捷键：当检测到Undo/Redo快捷键时，判断如果最近编辑的是目标输入框且当前焦点不在它身上，就阻止默认行为。

完整代码 #

// 定位目标输入框（这里以StackOverflow的搜索框为例）
const targetInput = document.querySelector('input[name="q"]');
// 记录最近编辑的元素
let lastEditedElement = null;

// 监听所有输入事件，更新最近编辑的元素
document.addEventListener('input', (e) => {
  lastEditedElement = e.target;
});

// 拦截输入框聚焦时的Undo/Redo
targetInput.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'historyUndo' || e.inputType === 'historyRedo') {
    e.preventDefault();
    console.log('聚焦状态下的Undo/Redo已阻止');
  }
}, { capture: true });

// 拦截全局Undo/Redo快捷键，仅针对目标输入框的情况
document.addEventListener('keydown', (e) => {
  // 判断是否是Undo（Cmd/Ctrl+Z）或Redo（Cmd/Ctrl+Shift+Z）快捷键
  const isUndo = (e.metaKey || e.ctrlKey) && e.key === 'z' && !e.shiftKey;
  const isRedo = (e.metaKey || e.ctrlKey) && e.key === 'z' && e.shiftKey;

  // 当快捷键触发，且最近编辑的是目标输入框，同时当前焦点不在它身上时，阻止默认行为
  if ((isUndo || isRedo) && lastEditedElement === targetInput && document.activeElement !== targetInput) {
    e.preventDefault();
    console.log('失焦状态下的Undo/Redo已阻止');
  }
});

方案说明 #

• 聚焦时的拦截：通过beforeinput事件直接阻止输入框自身的Undo/Redo操作，逻辑和你原有代码一致，改用querySelector让元素定位更简洁。
• 最近编辑元素追踪：通过全局input事件记录最后被修改的元素，确保我们只在全局快捷键会作用于目标输入框时才拦截，不会影响其他元素。
• 全局快捷键拦截：精准针对目标输入框的失焦场景，避免了无差别阻止全局Undo/Redo，保障其他输入元素的正常操作。

补充说明 #

如果需要处理右键菜单中的Undo/Redo选项（非快捷键触发），可以额外监听document的beforeinput事件，判断事件的inputType是否为historyUndo/historyRedo且目标元素为目标输入框，不过这种场景下浏览器行为略有差异，需根据实际情况调整。

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