Backspace不会删除Firefox中可信任DIV的内部html标记 [英] Backspace doesn't delete inner html tags of a contenteditable DIV in Firefox

问题描述

我创建了一个属性为contenteditable = true的DIV，并附加了像span和a这样的子属，其属性为contenteditable = false。想要测试是否用一个退格键删除整个节点，令我惊讶的是Firefox无法删除这些元素。此外，除了Firefox之外，所有主流桌面浏览器都能正常运行。关于这个或可能的解决办法的任何线索？

I have created a DIV with attribute contenteditable=true and appended children like "span" and "a" with attributes contenteditable=false. Wanted to test if the entire node be deleted with a single backspace and to my surprise Firefox couldnt delete the elements. Also this works as expected in all major desktop browsers except Firefox. Any clues on this or what could be the possible workaround?

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

Found the exact issue on bugzilla here.

推荐答案

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

Okay! found the solution... its rather simple than what you would think. I am actually inserting html for links, so using <a> here. The <a> tag has attribute set to contenteditable=false and its not getting deleted with a backspace. So I have created an inner <span> level with contenteditable=true for firefox and that did the trick.

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

这仅在Firefox中是必需的。其他浏览器将此视为符合预期，其中包含内容contenteditable = false。

This is required in Firefox only. Other browsers treat this as expected with the span having content contenteditable=false.

这篇关于Backspace不会删除Firefox中可信任DIV的内部html标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！