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

Question

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

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

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

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

这似乎工作得很好，标签是可编辑的，即使我没有指定 =true

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

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

Answer 1

它不需要值，空表示 true。

The attribute must take one of the following values: true or an empty string, which indicates that the element is editable. false, which indicates that the element is not editable.

If the attribute is given without a value, like Example Label, its value is treated as an empty string.

来自 MDN

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

Note that although its allowed values include true and false, this attribute is an enumerated one and not a Boolean one.

如果我们阅读the specs about boolean attributes

2.3.2 Boolean attributes

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

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

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

Can you explain a bit on the the inherit state, which is the missing value default statement? In my case, when it's missing, how is it inheriting a =true when my parent doesn't have any contenteditable attribute?

有 3 个州具有 contenteditable 属性：

是的，这些示例将使内容可编辑

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

The contenteditable content 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.

CSS 属性选择器

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

Another thing I have noticed is that if I don't specify =true, then targeting it with CSS only works with: [contenteditable] and not [contenteditable="true"]

The specs 说：

6.3.1. Attribute presence and value selectors CSS2 introduced four attribute selectors:

[att] Represents an element with the att attribute, whatever the value of the attribute.

[att=val] Represents an element with the att attribute whose value is exactly "val".

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

Does HTML contenteditable attribute require a =true for it to work? Why does it work without it even though it's not a boolean attribute?

html

css

contenteditable

CSS 属性选择器