更改 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($) {

  let $input = $("#input");

  setTimeout(function() {

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

    placeCaretAtEnd($input[0]);

  }, 1000);

});

/**

 *  @param {Element} el - A Native DOM Element

 */

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>

非 jQuery 方法非常相似且简单。

window.addEventListener('DOMContentLoaded', () => {

  let input = document.querySelector("#input");

  setTimeout(function() {

    input.innerHTML += "and I'm <b>very bold</b>";

    placeCaretAtEnd(input);

  }, 1000);

});

/**

 *  @param {Element} el - A Native DOM Element

 */

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;

}

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