Last Comment Bug 685445 - Contenteditable=false elements in contenteditable=true elements cannot be deleted by using Backspace
: Contenteditable=false elements in contenteditable=true elements cannot be del...
Status: NEW
Product: Core
Classification: Components
Component: Editor (show other bugs)
: 7 Branch
: All All
-- normal with 17 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: Makoto Kato [:m_kato]
Depends on:
Blocks: contenteditable
  Show dependency treegraph
Reported: 2011-09-08 00:43 PDT by Ioana (away)
Modified: 2017-01-22 20:29 PST (History)
21 users (show)
slmgc: needinfo? (daniel)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

reduced test case (945 bytes, text/html)
2011-09-08 00:43 PDT, Ioana (away)
no flags Details

Description User image Ioana (away) 2011-09-08 00:43:26 PDT
Created attachment 559066 [details]
reduced test case

Mozilla/5.0 (Windows NT 6.0; rv:7.0) Gecko/20100101 Firefox/7.0 (b4)
Mozilla/5.0 (X11; Linux x86_64; rv:8.0a2) Gecko/20110907 Firefox/8.0a2
Mozilla/5.0 (X11; Linux x86_64; rv:9.0a1) Gecko/20110831 Firefox/9.0a1

 1. Open the attached test case.
 2. Try to delete the blue letters on the page using only backspace (each blue letter is in a different span).

Expected Results:
 The whole content of the contenteditable element can be deleted using backspace, including the nested spans.

Actual Results:
 Spans nested in a contenteditable element cannot be deleted by using backspace.
Comment 1 User image Aaron Kaluszka 2011-09-08 10:40:35 PDT
From what I can tell, this bug actually has nothing to with spans. It occurs because the hosted elements have contenteditable set to false. You can replace the spans with divs, and remove the nested spans altogether and get the same behavior.
Comment 2 User image Aaron Kaluszka 2011-09-08 10:43:24 PDT
*** Bug 685452 has been marked as a duplicate of this bug. ***
Comment 3 User image Ioana (away) 2011-09-09 00:46:09 PDT
This bug is about Backspace not working on contenteditable=false elements in contenteditable=true elements at all, ever. Delete doesn't work on contenteditable=false elements in contenteditable=true elements only in one particular case - bug #685452 (a separate bug was filed for that because it is a distinct case).
Comment 4 User image shaddy 2013-06-24 02:58:42 PDT
I am still experiencing this bug in Firefox 21, 2 yrs after it was originally reported.
Comment 5 User image paul 2013-12-09 12:16:33 PST
I am also still experiencing this bug in Firefox 25 and Nightly(28.0a1)
Comment 6 User image Dave Jarvis 2013-12-28 16:51:19 PST
This might be slightly off-topic, but here's a way to show that backspace does not perform as expected within contentEditable=true list items. I suspect that the bug might be related to this bug.

= Replicate =

1. Visit
2. Position cursor to start of second list item.
3. Press backspace.

= Expected Results =

The second list item is joined with the first list item. The third list item becomes the second list item, and so on down the line. The last list item 

= Actual Results =

Backspace has no effect.

= Work Around =

1. Position the cursor to the end of the first line.
2. Press delete (this will join the first line with second line, as expected).
3. Press enter (this will split the first line and second line, resulting in what *looks* like the starting state).
4. Press backspace (now it works, but only for joining the first and second lines, which have been modified).

Firefox 26 for Ubuntu.
Comment 7 User image johanneswilm 2014-04-30 06:15:33 PDT
Still here in Firefox 29, similar to . Has contenteditable just been given up?
Comment 8 User image Gerald 2014-06-19 00:53:45 PDT
If the second, from end, character is space character, pressing backspace add another spaces.
Comment 9 User image keith 2014-08-14 01:06:28 PDT
after more than 3 years.. this bug still exists.
someone please update contenteditable. it was even showcased in HTML5 but its not working fine in Firefox.
Comment 10 User image keith 2014-08-14 18:36:50 PDT
i found a very simple workaround but it doesnt use contentediable="false" as a child node

use input type="button instead and must be disabled. backspace and delete works fine. for the arrow keys (up|down).. add role="textbox"

<div contenteditable role="textbox">
backspace works! <input type="button" disabled="disabled" value="delete me" />
Comment 11 User image rick 2015-02-19 00:50:07 PST
Still an issue heren in Firefox 35+

See for a simple demo
Comment 12 User image Baychae 2015-03-25 09:07:40 PDT
Still present in Firefox 36+. Crashes when I attempted to delete an embed image using backspace.
Comment 13 User image Baychae 2015-03-25 09:22:33 PDT

(In reply to Baychae from comment #12)
> Still present in Firefox 36+. Crashes when I attempted to delete an embed
> image using backspace.
Comment 14 User image ffx 2015-09-24 06:48:08 PDT
Experiencing similar problems as well with Firefox 41.0.  Like others mentioned above, we have been living with this for years.
Comment 15 User image slmgc 2016-04-18 09:18:57 PDT
In case anyone interested, I have found a developer
responsible for this issue, here's his comments:

"Warning, the current patch works only in the browser. Editing a document having
a contenteditable element will fail (blank page in the editor); I'm on it."

"For the purpose of this bug, I have blocked caret movement from one editable
frame to a non-editable one, outside of caret browsing mode of course. The ideal
solution would be a loop to find the nearest editable frame in the requested
direction but I have no time right now to do that, it's a significant change in

Note You need to log in before you can comment on or make changes to this bug.