Critical to solve Contenteditable in Firefox

Question

I am using contenteditable div and span with some icon. when i delete all the characters it takes some spaces in div only in Firefox. In Chrome is working fine.

Code:

<div id="test" contenteditable="true">dddddd</div>  **Chrome**
<div id="test" contenteditable="true"> dddddd</div> **FireFox**

It occurs when I delete the whole text.

Span is used for pencil icon.

I am afraid your question compared to the code, is not clear enough — maaeab, Aug 18 '15 at 12:46
It still isn't clear to me what the problem is. Both pictures look the same. — Bram Vanroy, Aug 18 '15 at 12:50
Is your problem solved by a (JS) [trim](http://stackoverflow.com/questions/498970/trim-string-in-javascript)? — FelipeAls, Aug 18 '15 at 12:55

score 2 · Answer 1 · answered Aug 18 '15 at 12:59

This is a known bug with Firefox. Bug 74408 which is a follow-up bug for bug 911201.

...after deleting all text a BR tag (w/ _moz_dirty attribute) is inserted in the div...

This also happens when you press space multiple times. The last one inserts a br.

The issue is visible here, in the snippet below: open the dev tools and watch the contents as you delete the text. In Firefox a br would be inserted, which is not the case with other browsers.)

#test {
    display: inline-block;
    font-family: monospace;
    background-color: yellow;
    min-width: 50px; font-size: 1.5em;
    text-decoration: underline;
}

<div id="test" contenteditable="true">dddddd</div>
<span>&laquo;</span>

Fiddle: http://jsfiddle.net/abhitalks/uz0eb092/2/

Critical to solve Contenteditable in Firefox

1 Answers1