TheLazy.Dev
Portfolio GitHub

Blog

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

takechamp

Yusuke Takei

Posted on July 25, 2022

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

💖 💪 🙅 🚩
takechamp
Yusuke Takei

Posted on July 25, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

I am purposefully super nice to AI because I imagine they are trained on data where nice people get better help. Doing this, though, has an existential uneasiness to it.
ai I am purposefully super nice to AI because I imagine they are trained on data where nice people get better help. Doing this, though, has an existential uneasiness to it.

November 28, 2024

The best way to get better at writing code is...
development The best way to get better at writing code is...

November 28, 2024

If you're a beginner, definitely check this open source guide. I've explained almost everything you need to know.
undefined If you're a beginner, definitely check this open source guide. I've explained almost everything you need to know.

November 28, 2024

AI Innovations at Microsoft Ignite 2024 What You Need to Know (Part 2)
githubcopilot AI Innovations at Microsoft Ignite 2024 What You Need to Know (Part 2)

November 29, 2024

Buying nothing, or how digital art is disappearing
discuss Buying nothing, or how digital art is disappearing

November 28, 2024