CODEWITHSUNDEEP
javascript
Tino Caer
Tino Caer

Reputation: 463

Javascript contentEditable, prevent <br> when there is no text

So I have a basic contentEditable div. The problem is that if the user deletes all the text, it actually forms a <br> tag inside of the contentEditable. I do not want this <br> tag to exist. Is there anyway to prevent this tag from appearing when all of the of the text is deleted?

Thanks

Upvotes: 4

Views: 2761

Answers (1)

nioKi
nioKi

Reputation: 1289

After stumbling upon this bugzilla thread, I did a quick little test.

It appears that the <br> tags is inserted because you're setting a <div> (block) as contentEditable. I think it's automagically inserted to prevent the element from collapsing.

If you do the same thing with a <span> (inline) element, CSS-stylized with a

display: block; min-height: xxx px; // To prevent collapsing when empty

then you're set, no more <br> inserted, and the element won't collapse.

Link to the demo JSFiddle

PS: I did check only under Firefox. If I remember correctly, there was a bug on the old WebKit engine where you couldn't place the caret in an empty node, you might encounter it.

Upvotes: 4

Related Questions