如何防止在 `<input>` 元素之外触发撤消/重做事件

Question

我想阻止在我的输入框中进行重做/撤消操作，但是当我在没有聚焦于输入框的情况下按cmd+z时，输入框中的文本仍然会被重做。

// stackoverflow 'Search...' input
const input = document.getElementsByName('q')[0];

input.addEventListener('beforeinput', e => {
  if (e.inputType === 'historyUndo' || e.inputType === 'historyRedo') {
    e.preventDefault();
    console.log('undo/redo prevented');
  }
}, { capture: true });

我尝试使用

document.addEventListener('beforeinput', ...)

，但我无法区分事件的目标是否是我的输入框。我应该怎么做才能阻止它而不影响其他输入元素？

Answer 1

为了防止鼠标指针不再位于元素中时按下 Ctrl+Z，您需要监控网站上的键盘事件并检查用户是否按下了 Ctrl+Z。然后，您可以根据您的要求处理或阻止撤消事件。

var inputElement = document.getElementById('your-input-element');
document.addEventListener('keydown', function (event) {
  if (event.ctrlKey && event.key === 'z') {
    if (document.activeElement !== inputElement) {
      // Suppress the undo (Ctrl+Z) event here
      event.preventDefault();
      console.log('Undo has been prevented');
    }
  }
});

上面，我使用 keydown 事件来跟踪用户何时按下 Ctrl+Z 并检查鼠标指针是否在元素内部。如果鼠标指针不在元素内部，我会抑制撤消事件。

Answer 2

事件目标是完成事件的元素或事件冒泡到的元素。由于您已为特定输入创建了事件处理程序，因此对于未指定此处理程序来处理事件的输入，将不会执行此事件处理程序。因此，您无需担心影响未添加事件处理程序的输入的历史记录。在下面的示例中，您可以看到两个输入，第一个输入具有覆盖历史更改的事件处理程序，另一个输入没有此类事件，因此其历史更改不会被覆盖。

const input = document.getElementsByName('q')[0];

input.addEventListener('beforeinput', e => {
  if (e.inputType === 'historyUndo' || e.inputType === 'historyRedo') {
    e.preventDefault();
    console.log('undo/redo prevented');
  }
}, { capture: true });

<input type="text" name="q">
<input type="text">