监听contenteditable div中的撤销/重做事件

Question

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

我不是在寻找撤销/重做算法或实现，只是想要监听事件并覆盖行为。

- jhchen

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事件来取消事件（火狐浏览器还不支持）：

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

- Motla

Answer 2

Ctrl+Z/Y是可以的，但我不确定右键单击->撤销/重做部分。

$(document).keydown(function (e) {
    var thisKey = e.which;

    if (e.ctrlKey) {
        if (thisKey == 90) alert('Undo');
        else if (thisKey == 89) alert('Redo');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

- Korikulum

---

已经以另一种方式实现了撤销功能，但我认为使用Ctrl+Z也很酷。谢谢，伙计，非常好用。 - Drew

Answer 3

在 如何使用JavaScript检测Ctrl+V、Ctrl+C？ 中有一个Control z的例子。

对于右键单击，您可以在右键单击时显示一个div 如何在JavaScript中捕获右键单击事件？

然后当他们在div上点击撤消选项时，只需放入一个onclick函数即可。

- Jared Drake