I need to set the caret position on a contentEditable iframe. It needs to work on Google Chrome and Firefox (no need for IE).

How can I do that?

I've tried

var ifr = document.querySelector(".myIframe");
var idoc = ifr.contentDocument;
var ibody = ifr.contentDocument.body; // content: "teststring|"

var caret = 2;

var sel = ifr.contentDocument.getSelection();
var range = sel.getRangeAt(0);

var el = ibody;
range.setStart(el, caret);
range.setEnd(el, caret);

And nothing happens on Chrome... What do I have to change?

I need to set the caret position on a contentEditable iframe. It needs to work on Google Chrome and Firefox (no need for IE).

How can I do that?

I've tried

var ifr = document.querySelector(".myIframe");
var idoc = ifr.contentDocument;
var ibody = ifr.contentDocument.body; // content: "teststring|"

var caret = 2;

var sel = ifr.contentDocument.getSelection();
var range = sel.getRangeAt(0);

var el = ibody;
range.setStart(el, caret);
range.setEnd(el, caret);

And nothing happens on Chrome... What do I have to change?

• javascript
• iframe
• contenteditable
• caret

1 Answer 1

This should work:

var ifr = document.querySelector(".myIframe");
var idoc = ifr.contentDocument;
var ibody = ifr.contentDocument.body; // content: "teststring|"

var caret = 2;

var sel = ifr.contentDocument.getSelection();
var range = sel.getRangeAt(0);

var el = ibody;
range.setStart(el, caret);
range.setEnd(el, caret);

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

Look at the last two lines