javascript - 更改 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>

谢谢你帮助我!

编辑

我想使用 jQuery，因为我已经使用 jQuery 引入的输入变量实现了很多功能。

Answer 1

您的选择器错误，您使用的是带有 .input 类的 div，而不是实际的 input 元素。

此外，如果值将是 jQuery 元素，则应在变量前(按照惯例)添加 $ 前缀。这将减少稍后代码中的困惑。

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>