Empty HTML tag in an editable div disappears when backspace is pressed on Firefox

Question

I'm using Firefox and I have this HTML code:

<div contenteditable="true">
   This is an empty tag : <b></b> and this is this is <b>not</b>
</div>

When I try to delete a character by pressing the "SUPPR" or "BACKSPACE" key, it removes the  for no reason.

It works on Chrome.

Check here: https://jsfiddle.net/t5jgb04y/ And then try to delete a character.

Answer 1

我认为在这种情况下，Firefox比Chrome更加智能，因为您无法在内使用此标记执行任何操作<div contenteditable>。使用键盘箭头或鼠标导航时，尝试在标签中插入内容- 不能。因此，基本上Firefox只是在任何更改时都删除了此类标签，因为它们根本无法使用。

现在更改为这些标记之间， 或者甚至 在这些标记之间留有空白-Firefox不会在更改后自动删除该标记，并且您现在可以导航和编辑其内容。

这是您的示例：

b {
  background-color: lightblue;
  padding: 10px;
}

<div contenteditable="true">
  This is an empty tag : <b></b> and this is <b>not</b>
</div>

这是我的示例，标签之间带有空白字符 ：

b {
  background-color: lightblue;
  padding: 10px;
}

<div contenteditable="true">
  This is an empty tag : <b>&nbsp;</b> and this is this is <b>not</b>
</div>

另一个示例只是标签之间有空白 -在这种情况下，您只能使用键盘箭头在之间进行导航：

b {
  background-color: lightblue;
  padding: 10px;
}

<div contenteditable="true">
  This is an empty tag : <b> </b> and this is this is <b>not</b>
</div>

是的，但即使标签为空，也不应将其删除。在我的例子中，我同意 `` 是没有用的。但是用 `` 替换它，你会发现 Firefox 仍然会删除它，即使它不应该删除。 (2认同)