Javascript 退格不能在Firefox中的Contenteditable div上工作

我使用以下程序插入文本并在

contenteditable

div

中更新光标。（这是一项自动完成功能。）

var选择，范围；
if（window.getSelection）{
//IE9和非IE
sel=window.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
范围=选择范围（0）；
range.deleteContents（）；
//Range.CreateContexturalFragment（）在这里会很有用，但是
//非标准且并非所有浏览器都支持（例如IE9）
var el=document.createElement（“div”）；
el.innerHTML=节点；
var frag=document.createDocumentFragment（），节点，lastNode；
while（（node=el.firstChild））{
lastNode=frag.appendChild（节点）；
}
range.insertNode（frag）；
//保留所选内容
如果（最后一个节点）{
range=range.cloneRange（）；
range.setStartAfter（lastNode）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
}
}
}
else if（document.selection&&document.selection.type！=“控制”）{
//IE<9
document.selection.createRange（）.pasteHTML（节点）；
}

在光标位置正确插入文本，并正确更新光标。然而，问题（我只能在Firefox中重现）如下：

使用上述程序插入文本

通过聚焦于另一个元素，将焦点从可编辑的

内容中移出

现在再次回到

contenteditable

div

将光标移到末尾

试试退格按钮

---

它不会删除文本。（退格不起作用。）

您能用代码设置一个JSFIDLE（或类似的）吗，这样我们就可以使用它并尝试让它工作？我已经从您的问题中删除了rangy标记，并改为放置范围，因为您调用了

窗口。getSelection

，因此rangy（这是一个特定的库）在您显示的代码中没有使用。欢迎来到内容可编辑的混乱局面。正如您刚刚发现的那样，浏览器并不一致地处理可编辑元素。下面是复制场景的复杂步骤：1）将光标保持在“部分”和“可编辑”之间，然后单击“插入节点”以插入文本2）然后多次单击“外部内容可编辑div”（在JSFIDLE的不同选项卡中，如js/html/css，并在检查表单中键入一些字符）3）然后尝试使用退格删除最后插入的“字符”。它不起作用。请让我知道我是否犯了任何错误，因为我是这个范围的新手。请找到小提琴：@turnerjhmm，无法在Chrome中重建它，但我可以在Firefox中重建它（我没有注意到你有Firefox标签duh）

var sel, range;
if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();

        // Range.createContextualFragment() would be useful here but is
        // non-standard and not supported in all browsers (IE9, for one)
        var el = document.createElement("div");
        el.innerHTML = node;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ((node = el.firstChild)) {
            lastNode = frag.appendChild(node);
        }
        range.insertNode(frag);

        // Preserve the selection
        if (lastNode) {
            range = range.cloneRange();
            range.setStartAfter(lastNode);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}
else if (document.selection && document.selection.type != "Control") {
    // IE < 9
    document.selection.createRange().pasteHTML(node);
}