Skip to content
Search

DEV Community

Yusuke Takei
Yusuke Takei

Posted on • Updated 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)

DEV Community

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.

Read next

ganesholi11 profile image

Donation ink! smart contract

Ganesh oli -

nuttapon profile image

Enhancing User Input Validation: Ensuring Proper Decimal Formatting with Regular Expressions

Nuttee -

citrusbug profile image

SaaS-related Interviews Questions with Answers

Citrusbug Technolabs -

roneo profile image

I’m building an audio library with Hugo and Internet Archive

Roneo.org -