Range.cloneRange () на самом деле не клонирует диапазон? - PullRequest
0 голосов
/ 26 мая 2019

Я пытаюсь сбросить позицию курсора после изменения 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 )

...