Backspace 不会删除 Firefox 中 contenteditable DIV 的内部 html 标记答案

【问题标题】：Backspace doesn't delete inner html tags of a contenteditable DIV in FirefoxBackspace 不会删除 Firefox 中 contenteditable DIV 的内部 html 标记
【发布时间】：2011-01-15 10:31:35
【问题描述】：

我创建了一个带有属性contenteditable=true 的DIV，并附加了带有contenteditable=false 属性的span 和a 等子元素。

想测试整个节点是否被一个退格键删除，令我惊讶的是 Firefox 无法删除这些元素。

此外，这在除 Firefox 之外的所有主要桌面浏览器中都可以正常工作。
对此有任何线索或可能的解决方法是什么？

在 bugzilla here 上找到了确切的问题。

【问题讨论】：

Bugzilla issue（请投票影响他们修复它）

标签： javascript dom-events contenteditable

【解决方案1】：

好的！找到了解决方案...它比您想象的要简单。我实际上是在为链接插入 html，所以在这里使用<a>。 <a> 标记的属性设置为 contenteditable=false 并且它不会被退格键删除。因此，我为 firefox 创建了一个带有 contenteditable=true 的内部 <span> 级别，并且成功了。

<div contentEditable="true">
   <a href="your/url/path" contentEditable="false">
     <span contentEditable="true">link here</span>
   </a>
</div>

这仅在 Firefox 中是必需的。其他浏览器按预期处理此内容，跨度的内容为 contenteditable=false。

【讨论】：

它的行为仍然有点古怪，但总比没有好:)

【解决方案2】：

我遇到了同样可怕的错误，别无选择，只能制作一个精心制作的基于 javascript 的解决方案，该解决方案可以监听按键事件以及是否按下了 backspace 并且插入符号正好位于起始偏移量一个文本节点，它之前的节点是一个元素节点，然后删除整个元素节点。

// credit: https://stackoverflow.com/a/25397485/104380
var isFF = !!navigator.userAgent.match(/firefox/i)
var editableElm = document.querySelector('div')

// listen to any key press
if( isFF )
  editableElm.addEventListener('keydown', onKeydown)

function onKeydown(e){
  if( e.key == "Backspace"  ){
    var selection = document.getSelection();
    
    // if caret is at the begining of the text node (0), remove previous element
    if( selection && selection.anchorOffset == 0 )
      selection.anchorNode.previousSibling.parentNode.removeChild(selection.anchorNode.previousSibling)
  }
}

<div contenteditable='true'>
  Try deleting theme <mark contenteditable='false'>marked</mark> words on <mark contenteditable='false'>Firefox</mark> ok?
</div>

【讨论】：

这会删除 div 之前的元素，而不是其中的内容。
@TylerLazenby 这就是 OP 要求的。整个问题是关于解决无法删除最后一个节点的 FF 错误，not 节点的文本内容，所以你在评论中说过，我引用 OP：...用一个退格键删除整个节点

【解决方案3】：

尝试在可编辑的 div 上添加“onkeydown”函数来停止事件传播（如下所示）。为我工作：

onKeyDown = (e) => { e.stopPropagation(); }

【讨论】：