如何防止删除 contenteditable 跨度？

Question

我正在尝试使用contenteditable span 。 但是，如果作为用户，我删除了跨度内的所有文本，跨度就会消失并且不再可编辑（尽管仍在 DOM 中）。 我该如何防止这种情况？

我在 Chrome 和 FF 中都看到了这个问题。

这是我尝试过的：

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

我根据2015 的这个答案将contenteditable="false"放在父元素上，但无论该属性是否存在于父元素上，结果都是相同的。

当然，我可以让 JS 拦截按键以防止用户完全清除内容，但这是一个糟糕的用户体验。 无论如何，我更喜欢纯 HTML 解决方案。

Answer 1

在写下这个问题时，我发现了一个解决方案。 对于可能需要它的其他人：在span上设置边框。

但是，正如@G-Cyrillus 所建议的那样，更好的解决方案是在节点为空时向span添加填充：

 <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>

有人有更好的解决方案吗？