Что происходит при удалении текста с помощью Backspace в элементе contenteditable?

Я подтвердил поведение contenteditable, чтобы лучше понять, как он работает.

Прежде чем читать…

Вы должны знать

• Текст
• Элемент
  • Элементы блочного уровня
  • Инлайн-элементы

Текстовый узел

Предположим, у нас есть следующий HTML без элемента, но с текстовым узлом внутри элемента contenteditable.

<div contenteditable="true">
  This is a text node.(caret)
</div>

В зависимости от браузера, после удаления всего текста с помощью Backspace будет два варианта.

Chrome и Edge

Не создается ни текстовый узел, ни элемент.

<div contenteditable="true">
  (caret)
</div>

Safari и Firefox

Создается <br>, и вы НЕ МОЖЕТЕ его удалить.

<div contenteditable="true">
  (caret)<br>
</div>

Элемент уровня блока

Предположим, у нас есть элемент p внутри элемента contenteditable.

<div contenteditable="true">
  <p>This is a p element.(caret)</p>
</div>

Chrome, Safari и Edge

<br> создается внутри элемента p после удаления всего текста.

<div contenteditable="true">
  <p>(caret)<br></p>
</div>

После повторного нажатия Backspace элемент исчезает.

<div contenteditable="true">
  (caret)
</div>

Такое поведение характерно и для других элементов блочного уровня, таких как h1 — h6, div и так далее.

Firefox

Firefox ведет себя странно. Он вставляет <br>, когда буква перед пробелом удаляется, как показано ниже.

<div contenteditable="true">
  <p>A p element is (caret)<br></p>
</div>

<br> остается, пока вы не дойдете до начала строки, а когда вы удаляете весь текст, он становится таким же, как и в других браузерах.

<div contenteditable="true">
  <p>(caret)<br></p>
</div>

После нажатия еще одного Backspace элемент исчезает.

<div contenteditable="true">
  (caret)
</div>

Список

Я расскажу об элементах ul и ol, поскольку их поведение отличается от других элементов блочного уровня.

<div contenteditable="true">
  <ul>
    <li>Item 1(caret)</li>
  </ul>
</div>

После удаления всего текста элемент li выглядит так же, как и другие элементы блочного уровня.

<div contenteditable="true">
  <ul>
    <li>(caret)<br></li>
  </ul>
</div>

Однако после нажатия еще одного Backspace все выглядит иначе.

Chrome, Safari и Edge

Создается <div><br></div>.

<div contenteditable="true">
  <div>(caret)<br></div>
</div>

И <div><br></div> исчезнет еще на один Backspace.

<div contenteditable="true">
  (caret)
</div>

Firefox

Когда дело доходит до Firefox, все элементы исчезают. Он не создает <div><br></div>.

<div contenteditable="true">
  (caret)
</div>

Инлайн-элемент

<div contenteditable="true">
  <span>This is a span element.(caret)</span>
</div>

Chrome, Safari и Edge

При удалении всего текста элемент span исчезает и вставляется <br>.

<div contenteditable="true">
  (caret)<br>
</div>

Firefox

Firefox снова вставляет <br>, когда удаляется буква перед пробелом.

<div contenteditable="true">
  <span>A p element is (caret)<br></span>
</div>

<br> остается, пока вы не дойдете до начала строки, и вы НЕ МОЖЕТЕ удалить <span><br></span> на этот раз. Что это такое?

<div contenteditable="true">
  <span>(caret)<br></span>
</div>

Ссылки

• contenteditable
• Текст
• Элемент
  • Элементы блочного уровня
  • Инлайн-элементы