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，但对谷歌Chrome有相反的效果（应该如此）。

这个类似的question的答案可以追溯到2013年。三年之后，这仍然是目前的情况吗？

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

受影响的浏览器：Internet Explorer 11

Answer 1

这是Internet Explorer 11中的错误。第7.6.1 of the HTML5 specification条规定：

contenteditable属性是枚举属性，其关键字为空字符串true和false。空字符串和true关键字映射到 true 状态。 false关键字映射到 false 状态。此外，还有第三种状态，继承状态，它是缺少值的默认值（默认情况下无效值）。

true 状态表示该元素是可编辑的。 inherit 状态表示该元素的父级是可编辑的。 false 状态表示该元素不可编辑。

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

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

HTML5 - contenteditable =“false”嵌套在contenteditable =“true”

1 个答案: