有这样的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中的文本时,光标会移动到输入框文本的开头。
有没有办法在更改contenteditable值后恢复光标位置?或者可能有其他方法可以达到相同的效果吗?