2

I have a contentEditable div.

Let's say the user clicks a button that inserts HTML into the editable area.

So, they click a button and the following is added to the innerHTML of the contentEditable div:

<div id="outside"><div id="inside"></div></div>

How do I automatically place the cursor (ie caret) IN the "inside" div? Worse, how can this work in IE and FF?

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Ben Mc
  • 2,038
  • 6
  • 30
  • 37

3 Answers3

7

For IE:

var range= document.body.createTextRange();
range.moveToElementText(document.getElementById('inside'));

range.select();

For Mozilla:

var range= document.createRange();
range.selectNodeContents(document.getElementById('inside'));

var selection= window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

In theory the Mozilla version should also work in Webkit and Opera. In practice Webkit selects nothing and Opera selects the whole page. Sigh. This is still not well-supported territory.

bobince
  • 528,062
  • 107
  • 651
  • 834
1

As far as i could understand from your question:

If it is contentEditable editable/typeable, you may try this:

  // you insert content with your code and after that
  document.getElementById('contentEditable_id_here').focus();
Sarfraz
  • 377,238
  • 77
  • 533
  • 578
  • Yes, that sets the focus on the main contentEditable div, but I'm looking to put the cursor (or caret) in the
    tags so when the user starts typing, that's where there cursor is already.     – Ben Mc Dec 12 '09 at 10:16
0

FYI focus() doesn't work for non-form elements with contentEditable enabled in Google Chrome (I just tried it on a <li> inside a list that is editable and nothing happened in Chrome 10.0.648.82 beta on Win XP Pro SP3).

thdoan
  • 18,421
  • 1
  • 62
  • 57