如何解决HTML contenteditable 属性是否需要 =true 才能工作?即使它不是布尔属性,为什么没有它也能工作? CSS 属性选择器
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”。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。