contenteditable = false，contenteditable = true [英] contenteditable=false in contenteditable=true

问题描述

问题：

我发现在Chrome和Opera中，当一个人加入两个p
标签时会发生这种不良行为删除它们之间的分隔。 Chrome和Opera会删除contenteditable = false元素（小部件）并在其后删除文本。

I have observed an undesirable behaviour in Chrome and Opera that occurs when one joins two p tags by deleting the separation between them. Chrome and Opera delete contenteditable=false element(widget) and text after.

示例：

关于jsfiddle的示例

html：

<div contenteditable="true" class="editor">
<p>This is the first paragraph.</p>
<p>&larr;Place your cursor here and press backspace. <span class="widget" contenteditable="false">widget</span> Text after widget</p> 
</div>

css：

.widget{
    display: inline-block;
    padding: 5px;
    background-color: gray;
}

.editor{
    font: 20px Trebuchet MS
}

问题：

为什么？

推荐答案

我很久以前就针对闪烁和 Webkit 。这很关键，没有解决方法。 Webkit团队试图修复它，但据我所知，他们引入了新的错误; |。

I reported this bug long time ago for Blink and Webkit. It's kind of critical and there's no workaround. Webkit team tried to fix it, but as far as I can see, they introduced new bug ;|.

PS。是的，此答案未提出任何解决方案，但是唯一的解决方案是覆盖 delete 和 backspace 键行为。

PS. Yes, this answer does not propose any fix, but the only fix is overriding delete and backspace keys behaviour.

这篇关于contenteditable = false，contenteditable = true的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！