我有一些在文本框上实现上下文菜单的代码，上下文菜单有一个Undo and Redo通过使用调用浏览器本机方法的项目document.execCommand('undo').
这段代码在基于 Chromium 的浏览器上按照我的要求运行，但在 FireFox 和 Opera 上结果不符合预期。
我的期望是撤消和重做的功能类似于输入元素的本机浏览器上下文菜单。结果是 input 元素不会撤消和重做，但是带有contenteditable属性集，按预期运行。
所以我想知道这是否是 Chromium 或 FireFox/Opera 浏览器之一的错误，或者我是否没有正确实现代码？
以下代码给出了我面临的问题的示例。感谢所有帮助。
<input contenteditable id="input" type="text"></input>
<div contenteditable id="div" class="inputLike" type="text"></div>
<button id="button1" type="button">Undo</button>
<button id="button2" type="button">Redo</button>
var input = document.getElementById("input"),
button1 = document.getElementById("button1"),
button2 = document.getElementById("button2"),
div = document.getElementById("div");
console.log("Undo", document.queryCommandSupported("undo"));
console.log("Redo", document.queryCommandSupported("redo"));
function doUndo() {
document.execCommand('undo', false, null);
}
function doRedo() {
document.execCommand('redo', false, null);
}
button1.addEventListener("click", doUndo, false);
button2.addEventListener("click", doRedo, false);
On jsfiddle
如果您想查看实际的上下文菜单代码，也可以在jsfiddle.
我认为这是不可能的document.execCommand()，至少在 Firefox 中是这样。您可以创建自己的撤消堆栈，或者将来使用新的撤消管理器 API (在 Firefox 20 中实现 but 默认禁用).
以下是使用您自己的撤消堆栈的示例，方法是使用以下命令拍摄值和选择的快照：input事件。例如，您可以通过将连续的键入事件合并到单个撤消项中来改进这一点。浏览器之间的插入符位置也存在一些不一致，但这只是概念证明。
http://jsfiddle.net/FMSsL/
使用新的 DOM UndoManager API 似乎很简单：如果我理解正确并且浏览器支持它，<input>元素将有一个undoManager属性，这是一个对象undo() and redo()方法，所以任务很简单
document.getElementById("input").undoManager.undo();
不幸的是只有 Firefox 20 及以上版本支持UndoManagerAPI，默认情况下是禁用的。即使启用后，下面的演示也无法工作，尽管我认为它应该工作，所以这个选项离可行还有一段路要走。
http://jsfiddle.net/DULV4/2/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
