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();
          }
        }