HTML5 - contenteditable="false" 嵌套在 contenteditable="true"

Question

我对嵌套的 contenteditable="false" 元素在父 contenteditable="true:

中有非常不同的行为

  <pre>
  <div contenteditable="true">
    <span>I'm supposed to be editable</span>
    <p contenteditable="false">I'm NOT supposed to be editable.<br>Neither should I.</p>
    <span contenteditable="false">I'm NOT supposed to be editable.</span>
  </div>
  </pre>

This fiddle 举例说明了两个不应可编辑的元素实际上可以使用 Internet Explorer 11 进行编辑，但 Google Chrome。给出了什么？

我看到有些人通过将它们设置为 "true" 来应用一种奇怪的解决方法，这确实适用于 IE，但对 Google Chrome 有相反的效果（因为它应该).

这个类似 question 的答案是 2013 年的。三年后，这仍然是当前的情况吗？

编辑： This fiddle 几乎达到了想要的结果。但是，如果将光标设置为 "Don't move.." 并将其向左移动直到到达不可编辑的范围，您将获得焦点并能够对其进行编辑。有什么想法可以避免这种行为吗？

受影响的浏览器：Internet Explorer 11

Answer 1

这是 Internet Explorer 11 中的错误。第 7.6.1 of the HTML5 specification 部分指出：

The contenteditable attribute is an enumerated attribute whose keywords are the empty string, true, and false. The empty string and the true keyword map to the true state. The false keyword maps to the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).

The true state indicates that the element is editable. The inherit state indicates that the element is editable if its parent is. The false state indicates that the element is not editable.

这意味着 contenteditable=true 元素中的 contenteditable=false 元素不应是可编辑的。

此外，contenteditable=true 元素中的 contenteditable=true 元素的内容应该是可编辑的。这意味着您链接的问题的答案实际上是无效的（尽管发布时可能是这种情况）。

HTML5 - contenteditable="false" 嵌套在 contenteditable="true"

HTML5 - contenteditable="false" nested in contenteditable="true"

html

contenteditable