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＆lt; = 8：

之外，这适用于所有主流浏览器

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

对于IE＆lt; = 8，您可以使用其他方法。这是我的另一个答案，有一个完整的例子：

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

Contenteditable：将光标移动到插入的html节点之外（webkit / ie）

1 个答案: