How to specifically set the caret position in a contenteditable div
I need to set the caret position in a contenteditable div in Chrome which is not focused but I know the caret position ie the character index in the HTML of the div. The div may have other elements inside of it.
The best I got so far is setting the caret position either at the end or start of the div
domNode.focus();
if (window.getSelection) {
var sel = window.getSelection();
//sel.collapseToStart();
//sel.collapseToEnd();
sel.collapse(domNode, caretPos);
}
I also tried calling 'modify' on the selection to manually move the cursor word by word and counting the length of the selected text but the text stops if there's an element in the way eg if the div content is " hello <span>world</span> " then the selected node's text will only be hello .