如何防止刪除 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>

有人有更好的解決方案嗎？