输入文本元素的正确只读属性语法是什么？

Question

大多数人都熟悉readonly属性用于文本输入框，但在阅读其他网站的代码时（这是我的一项不好的习惯），我看到了不止一种实现方式：

<input type="text" value="myvalue" class="class anotherclass" readonly >

和

<input type="text" value="myvalue" class="class anotherclass" readonly="readonly" >

我甚至见过

<input type="text" value="myvalue" class="class anotherclass" readonly="true" >

我相信我看到了更多，但现在无法回忆起确切的语法..

那么，我应该使用哪个正确的呢？

- Obmerk Kronen

---

可能是stackoverflow.com/questions/1033944/…的重复，因为两者都是布尔属性（未标记），密切相关但关注实现状态而不是标准：readonly="true"和readonly="readonly"之间有什么区别。 - Ciro Santilli OurBigBook.com

Answer 1

HTML5规范:

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

readonly属性是一个布尔属性。

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

元素上的布尔属性存在表示true值，缺少该属性则表示false值。

如果存在该属性，则其值必须为空字符串或与属性的规范名称不区分大小写的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"/>

建议

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

- Ciro Santilli OurBigBook.com

---

感谢您指出规范设计上的重大失误：按照设计，您无法计算属性值以切换其状态（例如，在服务器端使用模板化HTML - PHP/JSP/ASP，或者在客户端使用Angular，并在属性值中使用true/false）。您必须删除该属性才能将其关闭。委员会中竟没有人意识到这是一个大错特错吗？ - Roboprog

@Roboprog 哈哈，没错，有点烦人。 - Ciro Santilli OurBigBook.com

讲解得非常清楚。这应该是被采纳的答案。 - Nawed Khan

Answer 2

来自 w3:

readonly = "readonly" 或 ""（空字符串） 或 empty - 指定元素代表一个值不可编辑的控件。

所以基本上它们是相同的。

- Vucko

---

即使它确实有效，也不代表你应该使用它。我的建议是坚持使用标准方法。不要因为可以而引入错误。 - Mr Lister

@MrLister 标准建议遵循标准，即使它是循环的，也具有更大的权重 :) - aross

Answer 3

应该是这样的

<input type="text" value="myvalue" class="class anotherclass" readonly="readonly" />

- billah77

---

这只是三个有效形式中的一个。Ciro Santilli的回答更好。 - ToolmakerSteve

Answer 4

最佳实践是使用简单的readonly。这使得它最语义化和简洁。

信不信由你，

readonly="false"

返回 true;

要在 JavaScript 中检测元素是否为只读，请使用以下语法：

element.readOnly

- Charles Owen