如何將光標移動到Chrome/Safari中contenteditable div中的下一個元素？

Question

我有邏輯在contenteditable 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

這是一個long-standing and annoying bug in WebKit。另見the bug for the special case of placing the caret inside an empty inline element，它有更多的活動。除非插入和選擇單個零寬度空格字符是可以接受的，否則您可以做的事情不多。