contentEditable javascript插入div中的插入符号

Question

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?

Answer 1

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.

Answer 2

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();

Answer 3

FYI focus（）不适用于在Google Chrome中启用了contentEditable的非表单元素（我只是在一个可编辑的列表中的<li>上试了一下，在Win XP Pro SP3上的Chrome 10.0.648.82 beta中没有发生任何事情） 。