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

Answer 3

尝试在可编辑的 div 上添加“onkeydown”功能以停止事件传播（如下）。为我工作：

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

Backspace不会删除Firefox中可信任DIV的内部html标记

3 个答案: