如何在contenteditable div中设置跨度中的光标位置

Question

下面的代码是我现在用的，只是将光标位置设置为span的尾部

var node = document.getElementById("span_first");
var range = document.createRange();  
range.setStartAfter(node);
var sel = window.getSelection();
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

http://jsfiddle.net/vXnCM/3837/

但是我想将光标位置设置在跨度中的任何位置，我该怎么做？

谢谢。

Answer 1

你可以这样做：

function setCaret() {
   var element = document.getElementById("input");
   var range = document.createRange();  
   var node;   
   node = document.getElementById("first");  
   range.setStart(node.childNodes[0], 1);  <-- sets the location 
   var sel = window.getSelection();
   range.collapse(true);
   sel.removeAllRanges();
   sel.addRange(range);
   element.focus();    
}

node.childNodes[] 与您要将光标设置在哪一行有关，下一个数字是该行上的位置。在这个例子中是移动到空间 1 第 0 行（实际上是第 1 行）。因此，如果您将这些值更改为变量并将它们作为参数放入您的函数中，您可以指定位置。