Я пытаюсь сбросить позицию курсора после изменения HTML в contenteditable
span
. Чтобы сделать это, я клонирую текущий диапазон, затем устанавливаю HTML, затем очищаю диапазоны, затем добавляю диапазон и, наконец, сверну. Но когда я меняю html, клонированный диапазон сбрасывается! Это заставляет меня поверить, что клонированный диапазон на самом деле не является глубокой копией, потому что иначе, почему изменение HTML повлияло бы на него? Я думаю, что я могу скопировать все атрибуты вручную, но это звучит больно. В любом случае, как правильно копировать диапазон?
$("#myText").on("input", function() {
var temp = window.getSelection().getRangeAt(0).cloneRange();
console.log(temp);
$("#myText").html($("#myText").html());
//clear current range
console.log(temp);
window.getSelection().removeAllRanges();
//add the range
window.getSelection().addRange(temp);
//now move the carret to there
window.getSelection().collapseToEnd();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="myText" spellcheck="false" contenteditable="true">Hello!</span>
(или jsfiddle )