Javascript/Jquery: How to set focus at id inside contenteditable

Question

I have following html:

<div id="content" contenteditable="true" style="font-family: Helvetica;">
    Some text
    <div id="cursor" contenteditable="true"></div>
    Some other text.
</div>

Now I want to set cursor after Some text (exactly in #cursor). I tried both way:

$('#cursor').focus();
document.getElementById('#cursor').focus();

but it didn't work. Is there any way to do this?

Can you please explain what do you mean when saying 'set cursor'? — Ofir Baruch, May 26 '13 at 05:42
dup: http://stackoverflow.com/questions/14449721/set-cursor-position-after-nested-contenteditable — JNF, May 26 '13 at 05:45

score 2 · Accepted Answer · answered May 26 '13 at 06:06

#content is the outer editable element, so you'll need to focus that, and move the caret inside #cursor, but as #cursor has no content, there is nothing to target for a selection. A solution would be to add some content to target, like a textNode, move the caret, and then remove the content, like so:

var el    = document.getElementById("content"),
    el2   = document.getElementById("cursor"),
    range = document.createRange(),
    sel   = window.getSelection();

el2.innerHTML="temp";
var t = el2.childNodes[0];

range.setStartBefore(t);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
el2.innerHTML = "";

FIDDLE

Doesnt work in Firefox, and Chrome does not get a blinking caret. — giorgio79, Feb 18 '14 at 14:15

Javascript/Jquery: How to set focus at id inside contenteditable

1 Answers1