javascript - How to set the caret position on an editable iframe? - Stack Overflow

admin管理员组

文章数量:1387277

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

Share Improve this question Follow asked Nov 28, 2011 at 1:26 BrunoLMBrunoLM 100k8686 gold badges309309 silver badges461461 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

本文标签： javascriptHow to set the caret position on an editable iframeStack Overflow