javascript - 在 contenteditable div 中收听撤消/重做事件

Question

有没有一种方法可以监听用户可以在 contenteditable div 上触发撤消的所有方式？例如，当用户按下 Control+Z 时，右键单击 -> 撤消，或在文件菜单中编辑 -> 撤消。

我不是在寻找撤消/重​​做算法或实现，只是在寻找监听事件和覆盖行为的能力。

Answer 1

您可以获得input 事件的event.inputType。检查 "historyUndo"/"historyRedo":

var div = document.getElementById("mydiv");
div.addEventListener("input", function(e) {
  switch(e.inputType){
    case "historyUndo": alert("You did undo"); break;
    case "historyRedo": alert("You did redo"); break;
  }
});

<div id="mydiv" contenteditable="true">Hello world!</div>

在最近的浏览器中，您可以使用 beforeinput 事件取消事件(Firefox 还没有):

var div = document.getElementById("mydiv");
div.addEventListener("beforeinput", function(e) {
  switch(e.inputType){
    case "historyUndo": e.preventDefault(); alert("Undo has been canceled"); break;
    case "historyRedo": e.preventDefault(); alert("Redo has been canceled"); break;
  }
});

<div id="mydiv" contenteditable="true">Hello world!</div>

引用资料:

• InputEvent 规范和其他 inputType 值:https://w3c.github.io/input-events/#interface-InputEvent-Attributes
• beforeinput 的浏览器兼容性:https://caniuse.com/#feat=mdn-api_htmlelement_beforeinput_event