5

当我在 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）？

谢谢

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

感谢蒂姆的建议，这是工作代码：

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

1 回答 1

6

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

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

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

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

于 2013-02-19T12:18:35.820 回答