在Chrome/webkit中設置contenteditable div div中的插入符號位置

Question

我試圖在contenteditable div div中設置插入符的位置，並且在搜索了一下網頁並嘗試了一下之後，我在Firefox中使用了這個命令：

function set(element,position){ 
    element.focus(); 
    var range= window.getSelection().getRangeAt(0); 
    range.setStart(element.firstChild,position); 
    range.setEnd(element.firstChild,position); 
} 

[...] 

set(document.getElementById("test"),3); 

但是在Chrome/webkit中它會選擇div中的所有內容。這是Webkit的錯誤還是我做錯了什麼？
預先感謝您。

Answer 1

如果節點是文本節點，則節點內範圍邊界的偏移量僅爲字符偏移量。如果節點是元素，則偏移量是邊界之前的子節點的數量。

舉例來說，如果你有HTML

<div id="myDiv">One <b>two</b> three</div> 

...你創建一個範圍如下：

var range = document.createRange(); 
var myDiv = document.getElementById("myDiv"); 
range.setStart(myDiv, 1); 
range.setEnd(myDiv, 1); 

...你會得到啓動和立即結束一個範圍在div的第一個孩子之後，這是一個文本節點：

<div id="myDiv">One |<b>two</b> three</div>