HTML contenteditable 属性是否需要 =true 才能工作？即使它不是布尔属性，为什么没有它也能工作？ CSS 属性选择器

编程问答 2022-05-26

问题描述

HTML contenteditable 属性是否需要 =true 才能工作？为什么即使它不是布尔属性也能在没有它的情况下工作？

对此答案的评论指出“Contenteditable 不是布尔属性。”：

https://stackoverflow.com/a/45128348/1634905

例如，如果我有以下代码：

<p contenteditable placeholder="Website">www.example.com</p>

这似乎工作得很好，即使我没有指定 =true

我注意到的另一件事是，如果我不指定 =true，则使用 CSS 定位它仅适用于：

[contenteditable] 而不是 [contenteditable="true"]

解决方法

它不需要一个值，空意味着真。

该属性必须采用以下值之一： true 或空字符串，表示该元素是可编辑的。 false，表示该元素不可编辑。

如果给定的属性没有值，如示例标签，其值将被视为空字符串。

来自MDN

但有趣的是，它确实不是布尔值：

请注意，虽然其允许值包括 true 和 false，但该属性是枚举属性，而不是布尔属性。

如果我们读the specs about boolean attributes

2.3.2 布尔属性

许多属性是布尔属性。元素上布尔属性的存在代表真值，不存在该属性代表假值。

如果该属性存在，则其值必须是空字符串，或者是与该属性的规范名称不区分大小写的 ASCII 匹配值，且没有前导或尾随空格。

布尔属性不允许使用值“true”和“false”。要表示假值，必须完全省略该属性。

hidden 是一个布尔属性，hidden="true" 无效！

我将退一步用几个例子来解释这一点：

你能解释一下inherit状态，即缺失值默认语句吗？在我的情况下，当它丢失时，当我的父母没有任何 contenteditable 属性时，它如何继承 =true ？

有 contenteditable 属性的 3 个状态：

  • true，这些示例将使内容可编辑

    <div contenteditable="true"></div>
<div contenteditable=""></div>
<div contenteditable></div>

  • false，内容不可编辑：

    <div contenteditable="false"></div>

  • inherited：当属性未定义或值无效时继承。例如：<p> 的内容在此示例中是可编辑的：

    <div contenteditable> foo
  <p>bar</p>
</div>

    对于这种情况也是如此，因为 <p> 继承自 <div>，因为它的值无效。

    <div contenteditable> foo
   <p contenteditable="wrong">bar</p>
</div>

    在这种情况下，内容 foo 是可编辑的，而 bar 不是，这里没有继承：

    <div contenteditable> foo
  <p contenteditable="false">bar</p>
</div>

另见the specs：

contenteditable 内容属性是一个枚举属性，其关键字为空字符串、true 和 false。空字符串和 true 关键字映射到真实状态。 false 关键字映射到 false 状态。此外，还有第三种状态，继承状态，即缺失值默认和无效值默认。

CSS 属性选择器

关于css问题，（也许应该是stackoverflow上的一个新问题）

我注意到的另一件事是，如果我不指定 =true，则使用 CSS 定位它仅适用于： [contenteditable] 而不是 [contenteditable="true"]

The specs 说：

6.3.1.属性存在和值选择器 CSS2 引入了四个属性选择器：

[att] 表示一个带有 att 的元素 属性，无论属性的值如何。

[att=val] 代表 具有 att 属性的元素，其值正好是“val”。

contenteditablehtml