contentEditable javascript размещение каретки в div

Question

У меня есть contentEditable div.

Скажем, пользователь нажимает кнопку, которая вставляет HTML в область редактирования.

Таким образом, они нажимают на кнопку, и добавляется следующее к innerHTML из contentEditable DIV:

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

Как автоматически поместить курсор (т.е. каретки) в «внутри» DIV? Хуже. Как это работает в IE и FF?

Answer 1

Насколько я мог понять из Вашего вопроса:

Если contentEditable редактируемые/печатаемые, вы можете попробовать это:

// you insert content with your code and after that 
    document.getElementById('contentEditable_id_here').focus(); 

Answer 2

Для IE:

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

range.select(); 

Для Mozilla :

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

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

Теоретически версия Mozilla также должна работать в Webkit и Opera. На практике Webkit ничего не выбирает, а Opera выбирает всю страницу. Вздох. Эта территория по-прежнему не поддерживается.

Answer 3

FYI focus() не работает для элементов без формы с включенным contentEditable в Google Chrome (я просто попробовал его на <li> внутри списка, который можно редактировать, и ничего не произошло в Chrome 10.0.648.82 beta на Win XP Pro SP3).