Установите каретку в определенный момент в динамически добавленного HTML

Question

У меня есть contenteditable DIV

<div contenteditable="true" class="editable"></div> 

прилагаю некоторые HTML к нему с помощью:

$('.editable').html('<p><br></p>'); 

Как я могу установить каретку перед тем <br> ?

Answer 1

Установка позиции курсора в редактируемых материалах является сложной задачей.
Обработка курсора зависит от браузера. Есть диапазон и выбор apis, которые совершенно несовместимы с различными браузерами.

Это как играть с курсорами:

Создание объекта диапазона по document.createRange()
выбрать указанную позицию методами диапазона (см АНИ)
Получить выбор объекта по selection=window.getSelection()
удалить все существующий выбор по selection.removeAllRanges();
Добавить диапазон к выбору на selection.addRange(range);

В этом случае текстового содержимого в элементе абзаца нет, поэтому вы не можете поместить курсор внутри него. Вы можете либо выбрать узел на range.selectNode, либо вы можете поместить курсор до/после элемента. Размещение курсора до или после будет вести себя странно в разных браузерах, особенно в случаях с краем (например, в пустом div или в первом или последнем посте).

Вы должны четко указать, чего вы хотите достичь в пользовательском интерфейсе. Тогда я могу предложить некоторую логику для этого.