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

Question

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

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

Answer 1

您可以参加event.inputType活动input。检查"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