javascript - 用 jQuery 替换 HTML 后如何将光标放在文本末尾？

Question

我有一个 contenteditable div 并试图替换 <font>用 <span> 标记标记，但在使用 jQuery 替换 html 之后 replaceWith()函数光标默认位于文本的开头，但我希望它位于替换 html 的末尾。

这是 DEMO重现问题。如果重现问题有任何问题，请告诉我。

这是演示代码要点

<div id="test" contenteditable=true>
  <p> <font color="blue">Text to be replaced</font> </p>
</div>
<a id="replace" href="javascript:void(null);">replace</a>

JS代码

$('#test').focus();
$('#replace').on({
  mousedown: function (event) {
    event.preventDefault();
  },
  click: function () {
    $('#test').find('font').replaceWith(function () {
      return '<span style="color:red">' + 'New Text' + '</span>'
    });
  }
});

编辑:这里的问题听起来可能是重复的，但当您看到内容被替换时，它确实是不同的。我可能会替换用户选择的文本的一部分，而不是整个文本。所以我需要将光标放在替换原始 html 的 html 的末尾。

Answer 1

你可以使用这个功能

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

调用如下

placeCaretAtEnd( document.getElementById("content") );

EXAMPLE