'<br> is inserted into contenteditable html element if left empty
I have a <div contenteditable="true"></div> and when I enter some content into it, then delete these content, it seems like the browser is inserting a <br> element automatically into this element.
Does anyone has any experience with this? Know how to fix it?
Solution 1:[1]
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.
Solution 2:[2]
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.
Solution 3:[3]
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.
Solution 4:[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();
Solution 5:[5]
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.
Solution 6:[6]
This seems to work fine for me. If you want to remove the whitespace you can use:
str = $('div[contenteditable="true"]');
str.replace(/ /gi, '');
If you want to remove the <br> you can use:
str = $('div[contenteditable="true"]');
str.replace(/<br>/gi, '');
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Shyam Swaroop |
| Solution 2 | Robin Schultz |
| Solution 3 | Shyam Swaroop |
| Solution 4 | Inzmam ul Hassan |
| Solution 5 | Miki Amit |
| Solution 6 | Iwalewa Fawaz |