时间戳

首页 > 解决方案 > 在 Firefox 上按下退格键时，可编辑 div 中的空 HTML 标记消失

html - 在 Firefox 上按下退格键时，可编辑 div 中的空 HTML 标记消失

问题描述

我正在使用 Firefox，我有这个 HTML 代码：

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

当我尝试通过按“SUPPR”或“BACKSPACE”键删除字符时，它会<b></b>无缘无故地删除。

它适用于 Chrome。

检查这里：https ://jsfiddle.net/t5jgb04y/ 然后尝试删除一个字符。

标签： htmlfirefoxcontenteditable

解决方案

我认为在这种情况下 Firefox 比 Chrome 更智能，因为你不能<b></b>在<div contenteditable>. 尝试在<b>使用键盘箭头或鼠标导航时在标签中插入内容 -你不能。所以基本上 Firefox 只是在任何更改时删除这种标签，因为它们根本不可用。

现在更改<b></b>为<b> </b>甚至<b>&nbsp;</b>在这些<b>标签之间留一个空白空间 - Firefox 不会<b>在更改时自动远程处理标签，您现在可以导航和编辑其内容。

这是您的示例：

b {
  background-color: lightblue;
  padding: 10px;
}
<div contenteditable="true">
  This is an empty tag : <b></b> and this is <b>not</b>
</div>

这是我的示例，标签之间有空格字符<b>&nbsp;</b>：

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> </b>- 在这种情况下，您只能<b></b>使用键盘箭头在 之间导航：

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>

推荐阅读