1

In a contenteditable element, I have two types of children - span and regular text. 

<div contenteditable="true">I am first. <span class="tag">Mark me and delete me.</span> I am last.</div>

.tag {
    background-color: lightblue;
    margin-left: 5px;
    margin-right: 5px;
}

If I select the text content of a span (in the above example - Mark me and delete me.) and delete it (pressing backspace or del), the element disappears from the contenteditable parent:

<div contenteditable="true">I am first. &nbsp;I am last.</div>

However, when I type any character again - a span element is recreated. More oddly - some of the styles of the span are preserved, even if they come from a class definition:

<div contenteditable="true">I am first. <span style="background-color: rgb(173, 216, 230);">a</span>&nbsp;I am last.</div>

Is it possible to prevent this reinsertion of deleted elements?

My only idea thus far is to reparse the contenteditable after each keyup event and replace the faulty new elements. However, this is is clearly inefficient.

I think this problem appears only in Chrome, I couldn't reproduce it in Firefox. Here is a jsfiddle with the example above.

ılǝ
  • 3,440
  • 2
  • 33
  • 47
  • 1
    I'm not sure it's "recreating" child elements, per se, but rather recreating the visual formatting of the deleted text because you haven't changed the insertion point. That is, Chrome is behaving similarly to a text editor that maintains formatting even though there is no visible content present on the screen. In any case, see http://www.neotericdesign.com/blog/2013/3/working-around-chrome-s-contenteditable-span-bug (which incidentally references http://stackoverflow.com/questions/15015019/prevent-chrome-from-wrapping-contents-of-joined-p-with-a-span) – Palpatim Jul 03 '15 at 15:53
  • @Palpatim agreed, th behaviour now makes some sense. The links are also very useful - I could indeed unwrap only the currently selected element, rather that reparse the whole contenteditable parent. – ılǝ Jul 06 '15 at 06:18
  • Welcome to my most hated bug – https://code.google.com/p/chromium/issues/detail?id=226941. I reported it more than 2 years ago, it has 55 stars (which is a lot) and nothing... – Reinmar Jul 07 '15 at 09:15

0 Answers0