Javascript contentEditable, prevent
when there is no text

Question

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

Thanks

Just remove it programmatically when saved. If `
` is all that exists, remove it. — Wes Foster, Aug 04 '16 at 14:34
Can you please post your code. I created jsbin http://jsbin.com/mopenimoqo/edit?html,css,output which do not contains
tag after deleting all content — murli2308, Aug 04 '16 at 14:37

score 3 · Accepted Answer · edited May 23 '17 at 12:22

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

It appears that the   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  (inline) element, CSS-stylized with a

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

then you're set, no more   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.

Javascript contentEditable, prevent when there is no text

1 Answers1

Javascript contentEditable, prevent
when there is no text