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

Question

我在父contenteditable=“true”中使用嵌套的contenteditable="false“元素有非常不同的行为：

  <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>

这把小提琴举例说明了两个不应该被编辑的元素实际上在Internet 11上是可编辑的，而不是Google。怎么回事？

我见过一些人通过将它们设置为"true“来应用一种奇怪的解决方法，这确实适用于IE，但对Google却有相反的效果(正如它应该的那样)。

这个类似的问题的答案可以追溯到2013年。三年后，这是否仍是现时的情况？

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

受影响的浏览器: 11

Answer 1

这是Internet 11中的一个bug。HTML5规范的7.6.1节指出：

contenteditable属性是一个枚举属性，其关键字是空字符串、true和false。空字符串和true关键字映射到真实状态。false关键字映射到假状态。此外，还有第三种状态，即继承状态，它是缺失值默认值(和无效值默认值)。 true 状态指示元素是可编辑的。继承状态指示元素如果其父元素是可编辑的。 false 状态指示该元素不可编辑.。

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

此外，contenteditable=true元素中的contenteditable=true元素应该具有可编辑的内容。这意味着你所链接的问题的答案实际上是无效的(尽管当它被发布时，情况可能是这样的)。