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

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

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

Итак, они нажимают кнопку, и к innerHTML элемента contentEditable добавляется следующее:

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

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


javascript contenteditable cursor caret
person Ben Mc    schedule 12.12.2009    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Для IE:

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

range.select();

Для Мозиллы:

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

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

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

person bobince    schedule 12.12.2009

arrow_upward
1
arrow_downward

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

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

  // you insert content with your code and after that
  document.getElementById('contentEditable_id_here').focus();
person Sarfraz    schedule 12.12.2009
comment
Да, это устанавливает фокус на основном элементе contentEditable div, но я хочу поместить курсор (или каретку) в теги ‹div id=inside›‹/div›, поэтому, когда пользователь начинает печатать, именно там находится курсор уже. - person Ben Mc; 12.12.2009

arrow_upward
0
arrow_downward

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

person thdoan    schedule 23.02.2011