在Chrome / webkit中的contenteditable div圖層中設置插入位置

Question

我正在嘗試在一個可信的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);

...你會得到一個Range，它在div的第一個子節點之后立即開始和結束，這是一個文本節點：

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