如何在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行）。 因此，如果将这些值更改为变量并将其作为参数放入函数中，则可以指定位置。

Answer 2

如果选择是响应事件（例如焦点）而发生的，则可能要使用SetTimeout，否则可能无法使用（例如将光标移至末尾）：

  moveCursorToEnd(el){
    if(el.innerText && document.createRange)
    {
      window.setTimeout(() =>
        {
          let selection = document.getSelection();
          let range = document.createRange();

          range.setStart(el.childNodes[0],el.innerText.length);
          range.collapse(true);
          selection.removeAllRanges();
          selection.addRange(range);
        }
      ,1);
    }
  }