Javascript 无法获取文档。execCommand（'；undo'；）在不同浏览器中以相同的方式工作

我有一些代码在文本框上实现了一个上下文菜单，上下文菜单有一个

Undo

和

Redo

项，它使用

document.execCommand（'Undo'）

这段代码在基于Chromium的浏览器上按我的要求运行，但在FireFox和Opera上，结果并不像预期的那样。

我的期望是，undo和redo的功能类似于输入元素的本机浏览器上下文菜单。结果是输入元素不会撤消和重做，但是设置了

contenteditable

属性的div元素会按预期运行。

所以我想知道这是Chrome或FireFox/Opera浏览器中的一个bug，还是我没有正确地实现代码？

下面的代码给出了我所面临问题的一个示例。感谢所有的帮助

<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);

撤消
重做
var input=document.getElementById（“输入”），
button1=document.getElementById（“button1”），
button2=document.getElementById（“button2”），
div=document.getElementById（“div”）；
console.log（“Undo”，document.queryCommandSupported（“Undo”）；
console.log（“Redo”，document.queryCommandSupported（“Redo”）；
函数doUndo（）{
document.execCommand（'undo'，false，null）；
}
函数doRedo（）{
document.execCommand（'redo'，false，null）；
}
按钮1.addEventListener（“单击”，doUndo，false）；
按钮2.addEventListener（“单击”，doRedo，false）；

在

---

如果您想查看实际的上下文菜单代码，那么它也可以在上找到。

我认为至少在Firefox中，

document.execCommand（）

是不可能的。您可以创建自己的撤消堆栈，或者在将来使用新的（但是）

下面是一个使用您自己的撤销堆栈的示例，通过使用

输入

事件获取值和选择的快照。例如，您可以通过将连续的键入事件合并到单个撤消项中来改进这一点。使用插入符号位置的浏览器之间也存在一些不一致，但这只是一个概念证明

使用新的DOM UndoManager API似乎很简单：如果我理解正确并且浏览器支持它，

元素将有一个

UndoManager

属性，它是一个具有

undo（）

和

redo（）

方法的对象，因此任务非常简单

document.getElementById("input").undoManager.undo();

不幸的是，只有Firefox20及更高版本支持

UndoManager

API，默认情况下它是禁用的。即使启用了它，下面的演示也不起作用，尽管我认为它应该起作用，所以这个选项在某种程度上是不可行的

正如我从询问中发现的，Firefox中的undoManager API确实有效。我查看了Tim Down发布的JSFIDLE链接（），似乎有几个问题：

• undoScope

  属性必须设置为

  true

  （在线或编程）。这将启用该元素的

  undoManager

• 您撤消的任何操作都必须首先由

  undoManager.transact（）函数创建（尽管我想知道是否有办法将本机撤消堆栈合并到当前undoManager的事务历史记录中）

---

我只是一个新手，所以请恕我直言，看看关于使用它的所有信息。

我认为

execCommand（）

只支持Firefox中的“contenteditable”部分，而不是

元素。我试图搜索一些关于这方面的硬文档，但没有找到任何具体的内容。如果您知道任何或任何其他可能的方法？我只知道

execCommand（）

仅在MDN的“丰富编辑”文档中显示。您好！至少在Firefox中，

document.execCommand（）

是不可能的。谢谢你的回答。遗憾的是，所有的浏览器都不是以相同的方式运行的，我不知道哪一个浏览器执行得不正确（或者可能只是解释）。现在，我想我会等到这个新的API出现，除非我能为它找到某种垫片，以便我现在就可以开始查看它。感谢您提供的信息，我已经推迟了查看，但我可能会改变主意，很快重新访问它。您是对的，我的示例中肯定缺少了

undoScope

属性。至于其余部分，规范似乎没有考虑输入和文本区域，因此我不清楚如何甚至是否可以使用其

UndoManager

@tim down撤消用户输入。似乎任何要撤消的操作都必须首先使用

transact（）

函数来完成，因此，对于

undoManager

要使用

或

，您必须截取击键，然后通过在

transact（）

中调用/定义的函数应用它（例如

transact（executeAutomatic:function（）{//simulate keystroke}）

）。这对我来说似乎有点疯狂，这就是为什么我在寻找一种将本机撤销堆栈合并到撤销管理器中的方法。目前，您可以在任何

、

或

contentEditable

区域内点击

Ctrl-z

进行撤消。我的理解是，自动DOM事务应自动添加到撤消事务历史记录中，并

transact（）

可以与

executeAutomatic

一起使用，在执行自动事务时执行一些自定义操作，而且Firefox还没有实现规范中的自动事务部分。不过我很可能是错的。我很快会仔细检查规范：我想我可能是在做错误的假设。