CODEWITHSUNDEEP
javascriptcontenteditable
Robson Hermes
Robson Hermes

Reputation: 435

How to handle backspace and delete in editable div with nested spans and divs?

I have an editable div, which may contain plain text but also another tags. It may contain div and br (added by Chrome as the user types text and hits ENTER) and it can also contain some span elements with contenteditable=false (because they are updated dynamically from external events.

Like this:

enter image description here

<div contenteditable="true" spellcheck="true">
      aaaaaaaa<span style="background-color:#cecece;font-weight: bold;" contenteditable="false">He</span>
      said something.
</div>

The two problems are:

1 - If the user hits Enter between "aaaaaaaa" and the "He", we will have, from a user perspective, two line breaks:

enter image description here

2 - Then, with the cursor in the line between, if you then hit delete, then browser also deletes the span (with "He"):

enter image description here

This is an "electron wrapped site", thus running in Chrome, or Chromium to be exact. I guess I'd would have to interfere when Delete and Backspace are pressed, but I am really struggling to build it.

Anyone faced the same problem?

Upvotes: 2

Views: 2026

Answers (1)

Robson Hermes
Robson Hermes

Reputation: 435

To fix this problem, I've applied the strategy other developers here used: avoid DIV creation when hitting ENTER, instead, use only a BR. Used the solution from this post

Upvotes: 0

Related Questions