Здесь есть html:
<div contenteditable="true" class="value research-form thumbnail">
Some text here
</div>
И содержимое div должно динамически выделять некоторые слова, в то время как пользовательские типы, например, делают что-то вроде:
<div contenteditable="true" class="value research-form thumbnail">
Some text here <span style="background-color: yellow">highlight</div> it
</div>
<script>
$(document).ready(function () {
var input = $('#textarea').on('input', function (event) {
var newText = input.text().replace('highlight', '<span style="background-color: yellow">highlight</div>');
input.html($.parseHTML(newText));
});
});
</script>
Но есть проблема: при обновлении текста в div курсор перемещается при начале ввода текста.
Есть ли способ восстановить позицию курсора после изменения допустимого значения? Или, может быть, есть другой способ получить тот же эффект?