无法获取document.execCommand（'undo'）在浏览器中以相同的方式工作 [英] Unable to get document.execCommand('undo') working in the same manner across browsers
问题描述
我有一些代码在文本框中实现上下文菜单，上下文菜单中有一个撤消和重做项目，通过使用 document.execCommand（'undo'）调用浏览器本机方法。
此代码的功能如下在Chromium的浏览器，但在FireFox和Opera的结果是不如预期。
我的期望是撤消和重做将像输入元素的本地浏览器上下文菜单一样工作。结果是输入元素不会撤销和重做，但是具有 contenteditable 属性集的div元素会按预期方式运行。
所以我想知道这是否是一个错误的浏览器，Chromium或FireFox / Opera，或者如果我没有正确实现代码？
以下代码给出了我面临的问题的例子。
I have some code implementing a context menu on a textbox, the context menu is to have an Undo and Redo item that calls the browsers native methods by using document.execCommand('undo').
This code functions as I require on Chromium based browsers but on FireFox and Opera the results are not as expected.
My expectation is that undo and redo will function like the native browser context menu for an input element. The result is that the input elements do not undo and redo, however div elements with the contenteditable attribute set, do function as expected.
So I'm wondering if this is a bug in one of the browsers, either Chromium or FireFox/Opera, or if I am not implementing the code correctly?
The following code gives an example of the issue that I'm facing. All help is appreciated.
<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);
在 jsfiddle
如果你想查看实际的上下文菜单代码，那么它也可以在 jsfiddle 。
If you want to look at the actual context menu code, then it is also available on jsfiddle.
推荐答案
t认为可能与 document.execCommand（），在Firefox至少。您可以制作自己的撤消堆栈，或者以后使用新的 UndoManager API （在Firefox 20中实现，但默认情况下禁用）。
I don't think it's possible with document.execCommand(), in Firefox at least. You could make your own undo stack, or in future use the new UndoManager API (implemented in Firefox 20 but disabled by default).
这里有一个使用通过使用输入事件拍摄值和选择的快照来获取自己的撤消堆栈。例如，您可以通过将连续的键入事件合并为单个撤消项目来改进此操作。在插入位置的浏览器之间也有一些不一致，但它只是一个概念的证明。
Here's an example of using your own undo stack by taking snapshots of the value and selection using the input event. You could improve this by merging consecutive typing events into a single undo item, for example. There is also some inconsistency between browsers with the caret position, but it's just a proof of concept.
使用新的DOM UndoManager API似乎很简单：如果我理解如果浏览器支持它，< input> 元素将有一个 undoManager 属性，对象与 undo（）和 redo（）方法，所以任务就像
Using the new DOM UndoManager API seems to be simple: if I understand it right and if the browser supports it, the <input> element will have an undoManager property, which is an object with undo() and redo() methods, so the task is as simple as
document.getElementById("input").undoManager.undo();
Unfortunately only Firefox 20 and above supports the UndoManager API and it's disabled by default. Even once it's enabled, the following demo does not work even though I think it should, so this option is some way off being viable.这篇关于无法获取document.execCommand（'undo'）在浏览器中以相同的方式工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
