提问人：DisLido 提问时间：10/31/2023 最后编辑：DisLido 更新时间：10/31/2023 访问量：75
如何防止在“<input>”元素之外触发的撤消/重做事件
How to prevent undo/redo event which fires outside the `<input>` element
问：
我想防止输入框中的重做/撤消操作，但是当我按 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', ...)
编辑：我的意思是：当我模糊输入并按 cmd+z 时，输入将重新获得焦点并撤消我上次的更改，而不会对输入产生影响。我无法阻止此场景中的撤消操作。beforeinput
答：
0赞
Tran Audi
10/31/2023
#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，并检查鼠标指针是否在元素内。如果鼠标指针不在元素内，则禁止撤消事件。
评论
0赞
DisLido
10/31/2023
这将防止对页面中的其他输入元素执行撤消操作。我无法知道哪些输入将被撤消。
0赞
Tran Audi
11/1/2023
这将防止在输入元素没有焦点时对它们执行所有撤消操作。如果用户想要撤消输入元素，则需要关注它。
0赞
Lajos Arpad
10/31/2023
#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">
评论