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

/

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

Thanks you.

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/vXnCM/3837/

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

Thanks you.

• javascript
• jquery
• html
• css

• I feel tough to understand your problem, what's the meaning of this function and what's it used to? – Todd Mark Commented Mar 6, 2015 at 3:35
• Sorry, I have simplified it. – David Tsui Commented Mar 6, 2015 at 4:05
• 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 Commented Mar 6, 2015 at 4:06
• of course not set by mouse click =.=, by a js function – David Tsui Commented Mar 6, 2015 at 4:12

2 Answers 2

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.

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