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

重新定位一个contenteditable div的光标

1 个答案: