在插入的节点后插入插入符号答案

【问题标题】：Inserting caret after an inserted node在插入的节点后插入插入符号
【发布时间】：2012-04-07 09:19:45
【问题描述】：

所以我有一个方法，它接受一个标签并将选定的文本包装在该标签中。

function wrap(tag) 
{               
    var sel, range;
    if (window.getSelection)
    {
        sel = window.getSelection();
        if (sel.rangeCount)
        {
            range = sel.getRangeAt(0);
            var selectedText = range.toString();
            range.deleteContents();
            range.insertNode(document.createTextNode('['+tag+']'+selectedText+'[/'+tag+']'));                            
        }
    } 
}

然而，这个问题是在它完成包装文本并插入节点之后，插入符号（他们正在输入的地方）被放置在插入的文本之前。

有没有这样的方法来插入文本并将插入符号保留在它的末尾？

请注意，如果这可以在不使用 jQuery 或任何其他库的情况下完成，我会更喜欢。我只需要它在 webkit (Safari) 中工作。

【问题讨论】：

标签： javascript

【解决方案1】：

您可以使用 range.setStartAfter 和 range.setEndAfter 方法将起点和终点设置为新节点之后的点。我在这里设置了一个 jsfiddle 示例：http://jsfiddle.net/phil_mcc/tM3mA/

//move the caret
range.setStartAfter(newNode);
range.setEndAfter(newNode); 
sel.removeAllRanges();
sel.addRange(range);

【讨论】：

@phil mccull +1 以获得答案。如果您只需在该 div 中插入文本，而不是在文档中的其他任何位置，当单击“换行”时，该怎么办？
从链接中得到了我的问题的答案：stackoverflow.com/a/8340432/1407434，更新的小提琴：jsfiddle.net/tM3mA/38
我参加聚会很晚了，但我有一个问题 - 当我将行 var newNode = .. 更改为 var newNode = document.createElement('wbr'); 时它不起作用 - 光标位于标记之前..您可以在检查元素时在控制台中检查这一点，请参阅jsfiddle.net/7zd6r79d 如何在标记之后获取光标？
我已经用 TEXT_NODE (document.createTextNode('\r\n');) 对我的情况进行了检查，并且插入符号最终被添加到上面层次结构中元素的末尾:(

【解决方案2】：

在将节点插入范围后执行此操作 range.collapse(false); 这会将选择范围的位置更改为范围的末尾，所以我猜它应该将光标设置在结束位置

【讨论】：

Nothing :/ 可能与范围被删除有关。