在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>