Я пишу синтаксический ярлык. Маркер должен обновлять подсветку сразу при вводе текста и навигации с помощью клавиш со стрелками.
Проблема, с которой я сталкиваюсь, заключается в том, что при запуске события "keypress" вы все равно получаете старую позицию текстового курсора через window.getSelection()
.
Пример:
function handleKeyEvent(evt) {
console.log(evt.type, window.getSelection().getRangeAt(0).startOffset);
}
var div = document.querySelector("div");
div.addEventListener("keydown", handleKeyEvent);
div.addEventListener("keypress", handleKeyEvent);
div.addEventListener("input", handleKeyEvent);
div.addEventListener("keyup", handleKeyEvent);
<div contenteditable="true">f<span class="highlight">oo</span></div>