contenteditable 요소에서 백스페이스로 텍스트를 삭제하면 어떻게 됩니까?

작동 방식을 더 잘 이해하기 위해 contenteditable의 동작을 확인했습니다.

읽기 전에...

당신은 알아야합니다

Text

Element

Block-level elements

Inline elements

텍스트 노드

요소가 없지만 contenteditable 요소 내부에 텍스트 노드가 있는 다음 HTML이 있다고 가정합니다.

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

브라우저에 따라 Backspace로 전체 텍스트를 삭제한 후 2가지 패턴이 있습니다.

크롬과 엣지

텍스트 노드도 요소도 생성되지 않습니다.

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

사파리와 파이어폭스

<br>가 생성되며 삭제할 수 없습니다.

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

블록 수준 요소

contenteditable 요소 안에 p 요소가 있다고 가정합니다.

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

크롬, 사파리, 엣지

<br>는 전체 텍스트를 삭제한 후 p 요소 내부에 생성됩니다.

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

그런 다음 백스페이스를 한 번 더 누르면 요소가 사라집니다.

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

이 동작은 h1에서 h6, div 등과 같은 다른 블록 수준 요소에 대해서도 동일합니다.

파이어폭스

파이어폭스는 이상합니다. 아래와 같이 공백 앞의 문자를 삭제하면 삽입됩니다<br>.

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

<br>는 줄의 머리 부분에 도달할 때까지 남아 있으며 전체 텍스트를 삭제하면 결국 다른 브라우저와 동일한 상태가 됩니다.

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

그런 다음 백스페이스를 한 번 더 누르면 요소가 사라집니다.

<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>

그러나 백스페이스를 한 번 더 누르면 다르게 진행됩니다.

크롬, 사파리, 엣지

<div><br></div>가 생성됩니다.

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

그리고 <div><br></div>는 백스페이스를 하나 더 사용하면 사라집니다.

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

파이어폭스

Firefox에 관해서는 모든 요소가 사라졌습니다. 생성되지 않습니다<div><br></div>.

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

인라인 요소

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

크롬, 사파리, 엣지

전체 텍스트를 삭제하면 span 요소가 사라지고 <br>가 삽입됩니다.

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

파이어폭스

공백 앞의 문자가 삭제되면 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

Text

Element

Block-level elements

Inline elements