javascript - 为内容可编辑的 div 重新定位光标

Question

我用一个div来实现一个文本框，如下：

<div id="text" contenteditable="true">

然后我使用 span 为每个单词添加一些背景颜色。我使用以下事件来做到这一点。

document.getElementById("text").addEventListener('keyup', function () {
    ...
    this.innerHTML = output;
}

但是，每次触发此事件时，光标都会设置在文本区域的开头。如何在用户输入新字母后将光标设置回原来的位置？

更新：

请注意，我只是在改变颜色，原始文本本身并没有改变，所以如果我没有添加 keyup 事件，光标位置应该与它所在的位置相同。

Answer 1

请使用 div 元素调用此函数。

        function placeCaretAtEnd(el) {
          el.focus();
          if (typeof window.getSelection != "undefined"
                  && typeof document.createRange != "undefined") {
            var range = document.createRange();
            range.selectNodeContents(el);
            range.collapse(false);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
          } else if (typeof document.body.createTextRange != "undefined") {
            var textRange = document.body.createTextRange();
            textRange.moveToElementText(el);
            textRange.collapse(false);
            textRange.select();
          }
        }