How to I prevent deletion of contenteditable span?

Question

I'm trying to use a contenteditable span. But if, as the user, I delete all the text within the span, the span disappears and is no longer editable (still in the DOM though). How do I prevent this?

I'm seeing this problem in both Chrome and FF.

Here's what I've tried:

<div class="subgroup" contenteditable="false" style="border: 1px solid red;">
   <span class="header editable" contenteditable="true">initial contents</span>
</div>

I put contenteditable="false" on the parent element based on this answer from 2015, but the result is the same whether or not that attribute is present on the parent.

Of course, I could have JS intercept keypresses to prevent the user from completely clearing the contents, but that's a bad UX. I'd much prefer a pure HTML solution in any event.

`.subgroup span:empty { padding-right:1em;}` should help you find out a way. — G-Cyrillus, Jun 17 '20 at 16:44
@G-Cyrillus, that works, thanks! I used `1px` instead of `1em`. — JohnK, Jun 17 '20 at 17:35

JohnK · Accepted Answer · 2020-06-22T19:57:57.907

In writing up this question, I discovered a solution. For others who might need it: put a border on the span.

But there, as suggested by @G-Cyrillus, a better solution is to add padding to the span when the node is empty:

<style>
.subgroup span:empty { padding-right:1em;}
</style>
<div class="subgroup" contenteditable="false" style="border: 1px solid red;">
   <span class="header editable" contenteditable="true">initial contents</span>
</div>

Anyone have a better solution?

How to I prevent deletion of contenteditable span?

1 Answers1