Contenteditable удаление div и создание новых элементов

Question

У меня есть div, для которого contenteditable установлено значение true, а затем еще два div внутри добавляются динамически. Например,

<div contenteditable='true'>
    <div id='1'>
        <span>Something Editable</span>
        <span contenteditable='false'>Something NOT Editable</span>
    </div>
    <div id='2'>
        <span>Second Something Editable</span>
        <span contenteditable='false'>Something NOT Editable</span>
    </div>
</div>

Если у меня есть курсор в диапазоне, который говорит "Second Something Editable", и я нажимаю клавишу возврата, он перемещает текст в этом диапазоне в первый div, как в приведенном ниже коде, что я и делаю. не хочу.

<div contenteditable='true'>
        <div id='1'>
            <span>Something Editable</span>
            <span contenteditable='false'>Something NOT Editable</span>
            Second Something Editable.
        </div>
        <div id='2'>
            <span contenteditable='false'>Something NOT Editable</span>
        </div>
    </div>

И снова, если я нажму Enter в первом div (div id = 1) в строке, которая говорит Second Something Editable, он создаст новый div с id = 1 и поместит содержание там. Кто-нибудь может сказать мне, как это исправить. Спасибо

Answer 1

Чтобы обойти вашу первую проблему, я бы просто добавил флаг contenteditable непосредственно к <span>, который должен быть редактируемым, а не родительским контейнером.

Вторая проблема - это немного сложнее. Вы можете избежать создания нового <div>, добавив прослушиватель нажатия клавиши, перехватывая нажатие клавиши возврата и вызывая event.preventDefault(), чтобы остановить выполнение браузером действия по умолчанию.

Обновление:

Если вы не хотите, чтобы родительский <div> был доступен для редактирования, вы можете использовать ту же уловку, что и для возврата. На этот раз нам просто нужно перехватить нажатие клавиши Backspace (код клавиши 8) и проверить, находится ли курсор в данный момент в начале строки, чтобы пользователь все еще мог удалить текст.

Вот пример:

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
    if (e.keyCode == 8 && document.getSelection().anchorOffset == 0) {
    e.preventDefault();
  }
});

<div contenteditable='true'>
  <div id='1'>
    <span >Something Editable</span>
    <span contenteditable='false'>Something NOT Editable</span>
  </div>
  <div id='2'>
    <span contenteditable='true'>Second Something Editable</span>
    <span contenteditable='false'>Something NOT Editable</span>
  </div>
</div>