is inserted into contenteditable html element if left empty

Question

I have a

and when I enter some content into it, then delete these content, it seems like the b

Answer 1

Another way around this problem is to change the behavior of how the white space is handled inside the element. Use CSS:

white-space: pre-wrap;

Check out this link for both the solutions.

Answer 2

Use SPAN element as your contenteditable element instead of DIV element.

Please read complete. Q. Why the idea works? A. Span is an inline element and Div is a block element. Block elements when empty, by default, will have zero dimensions(if no padding is applied to the block element). In contrast, empty inline elements tend to maintain their height and width becomes zero. Hence, we just need to provide proper width to this Span(or any inline element), but, an inline element won't take width as a property and therefore we need to specify the display of this inline element as inline-block or block.

I have extensively used this idea for creating online-editors. Hope this helps.

NOTE: On changing display of an inline element to block/inline-block, doesn't mean the nature of element has changed. It is still an inline element, so an inline element will never be able to hold a block element inside it.

Answer 3

This issue happened to me when the callback of $(window).KeyUp event returned no value. Once applying "return true" in the registered callback the contenteditable div stopped applying unnecessary br tags.

Answer 4

I was running with same problem when i make a element content editable i figure out a
is inserted at the point i make element contenteditable at same time i remove breaks from the element. That perfectly worked for me.

 myselect.attr('contenteditable', 'true'); 
 myselect.find('br').remove();

Answer 5

I ran into this issue before developing a feature for a web app. It's a default behavior for browsers. It's the same as a line break for text editors. Best way to handle it is to run a RegEx on the content when submitting/grabbing it to remove the tags, and then blanking it when no text is available.

I typically use the <br> tags to figure out where my line breaks are. Some browsers use <p> tags, so be sure to cross-browser test it.