Есть ли простой способ предотвратить перемещение курсора в элементе div, который может быть вообще пригоден, даже если для добавления текста используется JavaScript?

Question

У меня был следующий код:

document.getElementById("myDiv").addEventListener("keydown", function (e){
  if (e.keyCode == 8) {
    this.innerHTML += "⠀".repeat(4);
    e.preventDefault();
  }
  //moves cursor
});

<div id="myDiv" contenteditable="true">Enter text.</div>

Я видел похожие вопросы, но ответы, которые я видел, недостаточны для того, чтобы div был доволен, и многие из них вообще не работают.
как это сделатьЯ уверен, что курсор не перемещается автоматически?

Answer 1

Попробуйте.

const el = document.getElementById("myDiv");
const sel = window.getSelection();
const offset = sel.getRangeAt(0).startOffset;

el.innerHTML += 'Text needed to be added'; // perform operations here

const nRange = document.createRange();
nRange.setStart(el.childNodes[0], offset);
nRange.collapse(true);

sel.removeAllRanges();
sel.addRange(nRange);

Я не проверял во всех браузерах. Вам потребуется выполнить некоторые дополнительные шаги, чтобы обеспечить совместимость браузера, но в этом суть.

Демо здесь: https://jsbin.com/xesitepima/edit?html,js,output

Частично взято из: https://stackoverflow.com/a/6249440/2492924