有没有一种方法可以监听用户在contenteditable div上触发撤销操作的所有方式?例如,当用户按Control+Z、右键单击->撤销或在文件菜单中选择编辑->撤销时。
我不是在寻找撤销/重做算法或实现,只是想要监听事件并覆盖行为。
有没有一种方法可以监听用户在contenteditable div上触发撤销操作的所有方式?例如,当用户按Control+Z、右键单击->撤销或在文件菜单中选择编辑->撤销时。
我不是在寻找撤销/重做算法或实现,只是想要监听事件并覆盖行为。
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-Attributesbeforeinput
的浏览器兼容性: https://caniuse.com/#feat=mdn-api_htmlelement_beforeinput_eventCtrl+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>
在 如何使用JavaScript检测Ctrl+V、Ctrl+C? 中有一个Control z的例子。
对于右键单击,您可以在右键单击时显示一个div 如何在JavaScript中捕获右键单击事件?
然后当他们在div上点击撤消选项时,只需放入一个onclick函数即可。