How to set cursor position in span in contenteditable div

Question

The code below is what I use now, just to set the cursor position to the tail of 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/

But I want to set the cursor position at any place in the span, how can I do?

Thanks you.

I feel tough to understand your problem, what's the meaning of this function and what's it used to? — Todd Mark, Mar 06 '15 at 03:35
The cursor can already be in any position in the span what do you mean? click somewhere and cursor will just go there at least that is what is going on in the fiddle — sinanspd, Mar 06 '15 at 04:06

score 6 · Accepted Answer · answered Mar 06 '15 at 05:25

You can do it like this:

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[] pertains to which line you want to set the cursor on and the next number is the location on that line. In this example is moves to space 1 line 0 (line 1 really). So if you change those values to variables and put them as parameters in your function you could specify where.

I don't know how well it works on older browsers just throwing that out there. — floor, Mar 06 '15 at 05:30
What about if we want to place the caret inside an element that has no text inside of it yet? — MikeMichaels, Oct 15 '20 at 13:55

score 0 · Answer 2 · answered Jan 14 '19 at 21:37

You might want to use SetTimeout if the selection happens in response to event (e.g. focus), otherwise it might not work (e.g. moving the cursor to end):

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

How to set cursor position in span in contenteditable div

2 Answers2

Linked