更改 contenteditable div HTML 并将光标移动到末尾不起作用

Question

我的功能有问题。我的目标是更改我的 contenteditable div 的内容。这很好用，但我让光标跳转开始问题。所以我在 SO 上找到了一个功能来解决这个问题。可悲的是，这个函数不像预期的那样工作并引发错误。也许是因为我在整个项目中都使用了 jQuery？

jQuery(document).ready(function ($) {

    let input = $("input");

    setTimeout(function () {

        input.html(input.html() + "and I'm <b>very bold</b>");

        placeCaretAtEnd(input);

    }, 1000);

});

function placeCaretAtEnd(el) {

    el.focus();

    if (typeof window.getSelection !== "undefined" && typeof document.createRange !== "undefined") {

        let range = document.createRange();

        range.selectNodeContents(el);

        range.collapse(false);

        let sel = window.getSelection();

        sel.removeAllRanges();

        sel.addRange(range);

    } else if (typeof document.body.createTextRange !== "undefined") {

        let textRange = document.body.createTextRange();

        textRange.moveToElementText(el);

        textRange.collapse(false);

        textRange.select();

    }

}

[contenteditable=true] {

  border: 1px solid #aaaaaa;

  padding: 8px;

  border-radius: 12px;

  margin-bottom: 20px;

  white-space: pre-wrap;

  word-wrap: break-word;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="input" contenteditable="true" spellcheck="true">I'm a <span>text</span> </div>

Answer 1

您的选择器错误，您使用的div是类.input而不是实际input元素。$此外，如果值将成为 jQuery 元素，则应在变量（按照惯例）前加上 a 前缀。这将减少后面代码中的混乱。jQuery(document).ready(function($) {&nbsp; let $input = $("#input");&nbsp; setTimeout(function() {&nbsp; &nbsp; $input.html($input.html() + "and I'm <b>very bold</b>");&nbsp; &nbsp; placeCaretAtEnd($input[0]);&nbsp; }, 1000);});/**&nbsp;*&nbsp; @param {Element} el - A Native DOM Element&nbsp;*/function placeCaretAtEnd(el) {&nbsp; el.focus();&nbsp; if (typeof window.getSelection !== "undefined" && typeof document.createRange !== "undefined") {&nbsp; &nbsp; let range = document.createRange();&nbsp; &nbsp; range.selectNodeContents(el);&nbsp; &nbsp; range.collapse(false);&nbsp; &nbsp; let sel = window.getSelection();&nbsp; &nbsp; sel.removeAllRanges();&nbsp; &nbsp; sel.addRange(range);&nbsp; } else if (typeof document.body.createTextRange !== "undefined") {&nbsp; &nbsp; let textRange = document.body.createTextRange();&nbsp; &nbsp; textRange.moveToElementText(el);&nbsp; &nbsp; textRange.collapse(false);&nbsp; &nbsp; textRange.select();&nbsp; }}[contenteditable=true] {&nbsp; border: 1px solid #aaaaaa;&nbsp; padding: 8px;&nbsp; border-radius: 12px;&nbsp; margin-bottom: 20px;&nbsp; white-space: pre-wrap;&nbsp; word-wrap: break-word;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="input" contenteditable="true" spellcheck="true">I'm a <span>text</span> </div>非 jQuery 方法非常相似且简单。window.addEventListener('DOMContentLoaded', () => {&nbsp; let input = document.querySelector("#input");&nbsp; setTimeout(function() {&nbsp; &nbsp; input.innerHTML += "and I'm <b>very bold</b>";&nbsp; &nbsp; placeCaretAtEnd(input);&nbsp; }, 1000);});/**&nbsp;*&nbsp; @param {Element} el - A Native DOM Element&nbsp;*/function placeCaretAtEnd(el) {&nbsp; el.focus();&nbsp; if (typeof window.getSelection !== "undefined" && typeof document.createRange !== "undefined") {&nbsp; &nbsp; let range = document.createRange();&nbsp; &nbsp; range.selectNodeContents(el);&nbsp; &nbsp; range.collapse(false);&nbsp; &nbsp; let sel = window.getSelection();&nbsp; &nbsp; sel.removeAllRanges();&nbsp; &nbsp; sel.addRange(range);&nbsp; } else if (typeof document.body.createTextRange !== "undefined") {&nbsp; &nbsp; let textRange = document.body.createTextRange();&nbsp; &nbsp; textRange.moveToElementText(el);&nbsp; &nbsp; textRange.collapse(false);&nbsp; &nbsp; textRange.select();&nbsp; }}[contenteditable=true] {&nbsp; border: 1px solid #aaaaaa;&nbsp; padding: 8px;&nbsp; border-radius: 12px;&nbsp; margin-bottom: 20px;&nbsp; white-space: pre-wrap;&nbsp; word-wrap: break-word;}<div id="input" contenteditable="true" spellcheck="true">I'm a <span>text</span> </div>