javascript - 在 contenteditable div 中监听 undo/redo 事件

Question

有没有一种方法可以监听用户可以在可内容编辑的 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

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>

Answer 3

如何使用 JavaScript 检测 Ctrl+V、Ctrl+C 中的 Control z 示例？

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

然后当他们单击 div 上的撤消选项时。只需放入一个 onclick 功能。