8

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

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

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

在这里找到关于 bugzilla 的确切问题。

4

3 回答 3

4

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

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

这仅在 Firefox 中是必需的。其他浏览器将其视为预期的跨度内容 contenteditable=false。

于 2010-02-17T06:56:19.177 回答
1

我面临着同样可怕的错误，别无选择，只能制作一个精心制作的基于 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>

于 2019-12-17T23:09:49.970 回答
1

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

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

于 2021-03-12T10:50:16.873 回答