Readonly=“真”和readonly=“只读”有什么区别？

Question

在以下方面有何区别：

<input name="TextBox1" type="text" id="TextBox1" readonly="true" />

以及：

<input name="TextBox1" type="text" id="TextBox1" readonly="readonly" />

当我将readonly设置为true时，它的工作方式与readonly='readonly'略有不同。W3C标准说，readonly应该是'readonly'，而不是'true'。为什么大多数浏览器都允许readonly='true'，它的功能与readonly='readonly'略有不同

Answer 1

给一个元素属性readonly将给该元素以只读状态。不管你在它之后放了什么值，或者如果你在它之后放任何值，它仍然会把它看作是只读的。把readonly="false"放上去没用。

建议使用W3C标准，即readonly="readonly"。

Answer 2

这是属性设置，而不是值属性。

这些属性设置是每次查看的值，不需要对它们进行任何赋值。当它们存在时，一个元素将这个布尔属性设置为true，当它们不存在时，它们就是false。

<input type="text" readonly />

实际上，浏览器对它们的价值分配是自由的。如果你给它们赋值，它就会被忽略。浏览器只会看到特定属性的存在，而忽略您试图分配给它们的值。

这当然很好，因为有些框架没有能力在不提供它们的价值的情况下添加这些属性。就是其中之一。jQuery在1.6版以前是一样的，在那里他们增加了属性的概念。

当然，也有一些与XHTML相关的含义，因为XML中的属性需要值才能形成良好的格式。但那是另一个故事。因此，浏览器必须忽略值分配。

不管怎么说。不介意您分配给他们的值，只要名称拼写正确，就会被浏览器检测到。但是为了可读性和可维护性，最好给它们分配有意义的值，例如：

readonly="true" <-- arguably best human readable
readonly="readonly"

而不是

readonly="johndoe"
readonly="01/01/2000"

这可能会使维护您的代码的未来开发人员感到困惑，并可能干扰将来可能对此类属性设置定义更严格规则的规范。

Answer 3

readonly="true"是无效的HTML5，readonly="readonly"是有效的。

HTML5规范

http://www.w3.org/TR/html5/forms.html#attr-input-readonly：

只读属性是一个布尔属性。

http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes：

元素上存在一个布尔属性表示真值，而缺少该属性则表示虚值。 如果属性存在，则其值必须是空字符串，或者是对属性的规范名称不区分大小写的ASCII值，没有前导或尾随空格。

结论

以下是有效、等效和真

<input type="text" readonly />
<input type="text" readonly="" />
<input type="text" readonly="readonly" />
<input type="text" readonly="ReAdOnLy" />

下面是无效的

<input type="text" readonly="0" />
<input type="text" readonly="1" />
<input type="text" readonly="false" />
<input type="text" readonly="true" />

属性的缺失是false的唯一有效语法。

<input type="text"/>

Recommendation

如果您关心编写有效的XHTML，请使用readonly="readonly"，因为<input readonly>是无效的，其他替代方案的可读性较低。否则，只需使用<input readonly>，因为它更短。