javascript - Contenteditable:将光标移到插入的 html 节点之外(webkit/ie)

Question

当我在一个 contenteditable div 中插入一个 html 标签时，我需要将光标移到新插入的元素之外(向右)，所以如果我继续键入，新文本将是未格式化的。

对于 Firefox，我发现这个解决方案工作得很好:

node = document.createElement("strong");
node.innerHTML = "test";

range.deleteContents();
range.insertNode(node);
range.collapse(false);

变量范围是这样设置的:

if (window.getSelection) {
    var sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
    }
}

在 webkit 浏览器(Chrome/Safari)中使用上述代码将光标放在新标签之外，但在左侧。

是否有针对此(Chrome/Safari)和 IE 支持(主要是 9，可选 8)的解决方案？

谢谢

=============================================

感谢 Tim 的建议，下面是工作代码:

var node = document.createElement("strong");
node.innerHTML = "test";

var space = document.createElement("span");
space.innerHTML = "\u200B";

range.insertNode(space);
range.insertNode(node);
range.collapse(false);

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

Answer 1

您需要在非 Mozilla 浏览器中重新选择范围。这将适用于除 IE <= 8 之外的所有主要浏览器:

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

对于 IE <= 8，您可以使用不同的方法。这是我的另一个答案，有一个完整的例子:

https://stackoverflow.com/a/4836809/96100