Change contenteditable div HTML and move cursor to end don't works

Question

I've a problem with a function. My goal is the change the content of my contenteditable div. This works good but I had the cursor jumpt to start problem. So I found a function on SO to fix this. Sadly, this function don't works like expected and throws an error. Maybe it's because I'm using jQuery all over my project?

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>

Thanks for helping me!

Edit

I want to use jQuery because I've implemented a lot with my input variable introduced with jQuery at the beginning.

Mr. Polywhirl · Accepted Answer · 2020-03-22T14:28:19.513

Your selector was wrong, you are using a div with the class .input rather than an actual input element.

Also, you should prefix your variables (by convention) with a $ if the value is going to be a jQuery element. This will reduce confusion later on in the code.

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>

The non-jQuery approach is very similar and simple.

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>

@Mr.Jo if you are declaring a variable that stores a [jQuery object](https://api.jquery.com/Types/#jQuery). It is used to reduce confusion on whether a variable is a native DOM Element or a jQuery object. It's just a recommended convention. See: [_Why would a JavaScript variable start with a dollar sign?_](https://stackoverflow.com/questions/205853) — Mr. Polywhirl, Mar 22 '20 at 14:45

Change contenteditable div HTML and move cursor to end don't works

1 Answers1