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);
    }
  }

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

2 个答案: