DEV Community

Yusuke Takei
Yusuke Takei

Posted on • Edited on

What happens when you delete text by Backspace in a contenteditable element?

I confirmed contenteditable's behavior to better understand how it works.

Before you read...

You must know

Text node

Suppose we have the following HTML with no element but a text node inside a contenteditable element.

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

Depending on your browser, there are 2 patterns after you delete the whole text by Backspace.

Chrome and Edge

Nither text node nor element is created.

<div contenteditable="true">
  (caret)
</div>
Enter fullscreen mode Exit fullscreen mode

Safari and Firefox

<br> is generated and you CANNOT delete it.

<div contenteditable="true">
  (caret)<br>
</div>
Enter fullscreen mode Exit fullscreen mode

Block-level element

Suppose we have a p element inside a contenteditable element.

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

Chrome, Safari and Edge

<br> is created inside the p element after you delete the whole text.

<div contenteditable="true">
  <p>(caret)<br></p>
</div>
Enter fullscreen mode Exit fullscreen mode

Then the element is gone after you press one more Backspace.

<div contenteditable="true">
  (caret)
</div>
Enter fullscreen mode Exit fullscreen mode

This behavior is the same for other block-level elements, such as h1 to h6, div and so on.

Firefox

Firefox is strange. It inserts <br> when a letter before a space is deleted like below.

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

The <br> remains until you reach the head of the line, and when you delete the whole text, it becomes the same state as the other browsers in the end.

<div contenteditable="true">
  <p>(caret)<br></p>
</div>
Enter fullscreen mode Exit fullscreen mode

Then the element is gone after you press one more Backspace.

<div contenteditable="true">
  (caret)
</div>
Enter fullscreen mode Exit fullscreen mode

List

I'll cover ul and ol elements as their behavior is different from other block-level elements.

<div contenteditable="true">
  <ul>
    <li>Item 1(caret)</li>
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

After you delete the whole text, the li element looks the same as other block-level elements.

<div contenteditable="true">
  <ul>
    <li>(caret)<br></li>
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

However it goes differently after you press one more Backspace.

Chrome, Safari and Edge

<div><br></div> is created.

<div contenteditable="true">
  <div>(caret)<br></div>
</div>
Enter fullscreen mode Exit fullscreen mode

And <div><br></div> will be gone by one more Backspace.

<div contenteditable="true">
  (caret)
</div>
Enter fullscreen mode Exit fullscreen mode

Firefox

When it comes to Firefox, all the elements are gone. It doesn't create <div><br></div>.

<div contenteditable="true">
  (caret)
</div>
Enter fullscreen mode Exit fullscreen mode

Inline element 

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

Chrome, Safari and Edge

When you delete the whole text, the span element is gone and <br> is inserted.

<div contenteditable="true">
  (caret)<br>
</div>
Enter fullscreen mode Exit fullscreen mode

Firefox

Firefox inserts <br> again when a letter before a space is deleted.

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

The <br> remains until you reach the head of the line and you CANNOT delete the <span><br></span> this time. What in the world is that?

<div contenteditable="true">
  <span>(caret)<br></span>
</div>
Enter fullscreen mode Exit fullscreen mode

References

Top comments (0)

Read next

davidjonson profile image

What is the Difference Between VPS and RDP Windows?

David Jonson -

mehfila_parkkulthil_23 profile image

Tips to learn python

Mehfila A Parkkulthil -

francis04j profile image

What are the best logging and monitoring tools for .NET apps

Francis Adediran -

anil_csimplifyit_905c profile image

AI Testing: A Technical Deep Dive into the Future of Software Quality Assurance

Anil Pal -