Изменить contenteditable div HTML и переместить курсор в конец не работает

Question

У меня проблема с функцией. Моя цель - изменить содержание моего довольного 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

Ваш селектор ошибочен, вы используете div с классом .input, а не с фактическим элементом 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>