如何在Chrome/Safari中将光标移动到可满足内容的div中的下一个元素

Question

我有逻辑在可满足的div中插入标记。我想在插入后将光标设置为以下元素的开始。我要做的代码是:

function insertNodeAtCaret(node) {
if(typeof window.getSelection !== 'undefined')
{
    var sel = window.getSelection();
    if(sel.rangeCount)
    {
        var rng = sel.getRangeAt(0);
        rng.collapse(false);
        rng.insertNode(node);
        // The following doesn't work in Chrome or Safari
        node = node.nextSibling;
        rng.setEndAfter(node);
        rng.setStartAfter(node);
        rng.collapse(true);
        sel.removeAllRanges();
        sel.addRange(rng);
    }
}
else if (typeof document.selection !== 'undefined' && document.selection.type !== 'Control')
{
    document.selection.createRange().pasteHTML(node.outerHTML);
}
}

然而，虽然这在IE, Opera和Firefox中工作完美，但在Chrome和Safari中不起作用。在Chrome/Safari中，光标被放置在跨度内的文本末尾，而不是在跨度之后。即

<span>text CURSOR HERE</span>

而不是我想要的，也就是:

<span>text</span>CURSOR HERE

谢谢。

Answer 1

这是WebKit中一个长期存在的令人讨厌的bug。另请参阅将插入符号放置在空的内联元素中的特殊情况的错误，这种情况有更多的活动。除非插入和选择一个零宽度的空格字符是可以接受的，否则对此你无能为力。

Answer 2

您必须将contentEditable={false}赋给您插入的元素:

<div contentEditable={true}> 
   <span contenEditable={false>/span>
</div>