Contenteditable div - 无法删除带有退格键的内部 HTML 节点答案

【问题标题】：Contenteditable div - cannot delete inner HTML nodes with backspaceContenteditable div - 无法删除带有退格键的内部 HTML 节点
【发布时间】：2021-09-23 07:21:00
【问题描述】：

我正在尝试在 contenteditable div 中实现提及。我正在使用名为 TributeJS (https://github.com/zurb/tribute) 的外部库。大多数情况下它工作正常，但是如果我在没有空格和多行的情况下一起写提及然后尝试用退格键删除它们，那么在某些时候我不能再删除提及了。

输入中的提及使用带有 contenteditable="false" 的 span，如下所示：

<span contenteditable="false" class="mention" data-id="user1">
  @<label class="mention-label">User 1</label>
</span>

我已经录制了一个视频，所以我可以更容易地解释这个问题： https://files.fm/f/ga5dak22b

我还创建了一个 Codepen 来重现此问题： https://codepen.io/tilenhosnar/pen/powZqBw

我在 Chrome 浏览器中出现此问题。我想知道是否有任何方法可以在退格键上“强制”删除 contenteditable div 中的子 HTML 节点？在过去的几天里，我几乎尝试了所有能找到的解决方案，但它仍在发生。

【问题讨论】：

标签： javascript html google-chrome

【解决方案1】：

也许可以尝试使用 ANSI 转义码来代替退格，This question might help you.

【讨论】：