Backspace不会删除Firefox中可编辑内容的DIV的内部html标签

Question

我创建了一个具有属性contenteditable=true的DIV，并附加了具有属性span的子项，例如a和contenteditable=false。

想测试是否使用单个退格键删除整个节点，令我惊讶的是Firefox无法删除元素。

此外，此功能在除Firefox之外的所有主要台式机浏览器中都可以正常工作。关于此的任何线索或可能的解决方法是什么？

在bugzilla here上发现了确切的问题。

Answer 1

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

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

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

Answer 2

我也面临着同样的可怕错误，别无选择，只能制作一个基于JavaScript的精心设计的解决方案，该解决方案可以侦听按键事件以及是否按下了[[delete，并且插入符号仅位于文本节点的起始偏移处，并且它之前的节点是元素节点，然后删除整个元素节点。

// 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>
</div>