contentEditable div заменяет innerHTML на лету

Question

Есть ли способ (кроме библиотеки Rangy) изменить contentEditable Div InnerHTML на лету, как при keyup, без потери положения курсора / потери фокуса? Я хотел бы использовать чистый код JavaScript, настолько простой, насколько это возможно.

например:

<div id="divId" contentEditable="true" onkeyup="change(this)"></div>

тогда javascript:

function change(element)
{
  element.innerHTML = element.innerHTML.replace(/.../, '...');
}

Спасибо.

Answer 1

Если вы заменяете HTML, вам потребуются некоторые средства для сохранения и восстановления вашего выбора.Доступны следующие варианты:

1. Вставить элементы с идентификаторами в начале и конце выделения перед заменой HTML, затем извлечь их по идентификатору и переместить границы выделения с помощью этих элементов.Это самый надежный метод, и именно это делает Rangy.
2. Сохраняет какое-то символьное смещение для начала и конца выделения перед заменой HTML и воссоздает выделение впоследствии.Это имеет все виды проблем в общем случае, но может быть достаточно хорошим, в зависимости от ваших потребностей.Я разместил функции на SO, чтобы сделать это до , которые зависят от Rangy, но вы могли бы легко удалить Rangy, если не против потери поддержки IE <9. </li>
3. Сохранить и восстановить границы выделения по пиксельным координатам.Браузерная поддержка для этого не является хорошей и не будет подходящей, если ваша замена HTML изменит макет.

Answer 2

Это не использует событие keyup, но, возможно, этого будет достаточно?Обратите внимание, что это относится к телу, вы можете явно нацеливаться только на определенный элемент.

document.body.contentEditable='true';
document.designMode='on';
void 0;