1

I need to set the cursor at a specific character offset. In the example below, I'd want to, for example, set it between the "a" and the "b".

<ul contenteditable = true >
    <li id = "test">abcdef</li>
</ul>

I asked before and got this fiddle: http://jsfiddle.net/5a9uD/1/

That worked great for the given example and for what I needed it for then. But it does not work with this example: http://jsfiddle.net/mdwWN/ It gets an IndexSizeError at 

range   = sel.getRangeAt(0);
user984003
  • 28,050
  • 64
  • 189
  • 285
  • For a more general solution that works with nested HTML elements, you could try something like this answer: http://stackoverflow.com/a/16100733/96100 – Tim Down Jun 28 '13 at 08:27

1 Answers1

1

You just have to pass text container's childNodes[0] to range.setStart function. Check this out.

function setSelectionRange(aNode, childElem, aOffset) {

  aNode.focus();

  var sel = window.getSelection(),
  range = sel.getRangeAt(0);

  range.collapse(true);

  range.setStart(childElem.childNodes[0], aOffset),

  sel.removeAllRanges();
  sel.addRange(range);
}

var container = document.getElementById("test");
var childElement = document.getElementById('item1');
setSelectionRange(container, childElement, 1);

Here is the working fiddle.