使用 execCommand 插入文本会导致重复问题

Question

我正在开发一个 Firefox 扩展，它可以使用键盘快捷键将波兰语字符插入任何文本字段。它适用于所有文本字段，但 Facebook Draft.js 和任何 React contentEditable DIV.

除外

重现步骤：

加载http://facebook.github.io/draft-js/
打开Chrome开发工具
Select Draft.js 输入框，以便输入插入符存在
在开发工具控制台中执行document.execCommand("insertHTML", false, "X");

预期结果： X被添加到输入框

实际结果： X被添加到输入框两次。您可以删除其中一个实例，但另一个无法删除但可以选择。

注意：在 Draft.js 输入中输入至少一个字符后，命令将按预期工作。

Answer 1

我明白了。在执行 document.execCommand("insertHTML", false, "X"); 之前，检查 <span data-text="true"></span> 的长度是否为 0。如果是，只需运行 document.execCommand("undo", false); 跟在 insertHTML execCommand 之后，瞧！有效！

代码如下：

if (document.querySelectorAll('span[data-text="true"]').length === 0) {
    document.execCommand("insertHTML", false, "X");
    document.execCommand("undo", false);
} else {
    document.execCommand("insertHTML", false, "X");
}

它将检查您是否输入了第一个字符。如果你这样做了，它将执行 undo execCommand 并删除多余的 X。else 将只是 insertHTML，因为一旦输入字符它就不会插入任何额外内容。

使用 execCommand 插入文本会导致重复问题

Inserting text with execCommand causes a duplication issue

javascript

facebook

xul

execcommand

reactjs