Способ изменения положения курсора (каретки) в соответствии с условием

Question

О contenteditable = "true", я хочу сделать невозможным удаление .icon в этом.(.Icon всегда идет последним.)

Я пытаюсь следующий код.

<h2>
  <span class="txt" contenteditable="true">World</span>
</h2>

<h2>
  <span class="txt" contenteditable="true">Hello<span class="icon" contenteditable="false">★</span></span>
</h2>

<style>
h2 {
    word-break: break-all;
}
span.txt {
    border-bottom: 1px solid black;
    cursor: text;
    width: 100%;
    height: 100%;
    display: inline-block;
}
</style>

<script>
document.addEventListener ('click', event=> {
  let selection = event.view.getSelection();
  let target = event.target;
  let doc = target.ownerDocument;
  let icon = target.closest ('.icon');

  if (icon) {
    let e = icon.previousSibling;
    if (e) {
      let range = doc.createRange ();
      let len = e.length;
      range.setStart (e, len);
      range.setEnd (e, len);
      selection.removeAllRanges ();
      selection.addRange (range);
    }
  }
}, false);
</script>

Пример: https://jsfiddle.net/46fjdaxz/

Приведенный выше код сделал это невозможнымдля удаления .icon.

В «Области мира» каретка отображается при щелчке в любом месте, но каретка не отображается при нажатии за «Привет областью».

Как я могуполучить отображение каретки в разделе «Привет»?

Заранее благодарим за помощь.

Answer 1

Даже в вашем коде я мог бы удалить значок: просто нажав после значка и нажав клавишу Backspace, и он был удален для меня.

но для вашей цели я мог бы предложить это: https://jsfiddle.net/bardc04j/

Просто отделите редактируемую часть от нередактируемой

<h2>
  <span class="txt" contenteditable="true">Hello</span>
  <span class="icon" contenteditable="false">★</span>
</h2>

Также я просто удалил ваш CSS, чтобы поместить значок рядом с текстом.

надеюсь помочь.