Question

我有一个contenteditable div并试图用<font>标签替换<span>标签但是在使用jQuery replaceWith()替换html后，函数默认为文本的开头但是我想要它在替换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

Answer 2

如果您使用<span>手动创建document.createElement()元素并保留对其的引用，则可以轻松地将插入符号放在其后面。

演示：http://jsfiddle.net/Gaqfs/10/

代码：

function placeCaretAfter(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.setStartAfter(el);
        range.collapse(true);
        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();
    }
}

$('#test').focus();
$('#replace').on({
    mousedown: function (event) {
        event.preventDefault();
    },
    click: function () {
        var span = document.createElement("span");
        span.style.color = "red";
        span.innerHTML = "New Text";
        $('#test').find('font').replaceWith(span);
        placeCaretAfter(span);
    }
});

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

2 个答案: