对于HTML表单输入字段，禁用=“禁用”和readonly=“readonly”有什么区别？

Question

对于HTML表单输入字段，禁用=“禁用”和readonly=“readonly”有什么区别？我读过一些关于这一点的文章，但我似乎找不到任何关于不同浏览器如何对待事物的确凿信息。

Answer 1

A readonly元素是不可编辑的，但是在form提交。一个disabled元素是不可编辑的，也不会在提交时发送。另一个不同是readonly元素可以聚焦(并且在通过窗体“选项卡”时获得焦点)disabled元素不能。

阅读更多有关这方面的资料这篇伟大的文章或W3C的定义..引用以下重要部分：

关键差异

禁用属性

• 禁用窗体元素的值不会传递给处理器方法。W3C称这是一个成功的元素。(这类似于未选中的表单复选框。)
• 有些浏览器可能会覆盖或提供禁用窗体元素的默认样式。(灰色或浮雕文本)InternetExplorer 5.5对此特别反感。
• 禁用的表单元素不会接收焦点。
• 在选项卡导航中跳过禁用的表单元素。

只读属性

• 并非所有表单元素都具有只读属性。最值得注意的是

  <SELECT> , <OPTION>

  ，和

  <BUTTON>

  元素没有只读属性(尽管它们都禁用了属性)
• 浏览器不提供窗体元素被只读的默认重写视觉反馈。(这可能是一个问题，…见下文)
• 具有readonly属性集的表单元素将被传递给表单处理器。
• 只读表单元素可以接收焦点。
• 选项卡导航中包括只读表单元素。

Answer 2

当元素具有禁用属性时，不会触发任何事件。

下面的任何一个都不会触发。

$("[disabled]").click( function(){ console.log("clicked") });//No Impact$("[disabled]").hover( function(){ console.log("hovered") });//No Impact$("[disabled]").dblclick( function(){ console.log("double clicked") });//No Impact

而只读将被触发。

$("[readonly]").click( function(){ console.log("clicked") });//log - clicked$("[readonly]").hover( function(){ console.log("hovered") });//log - hovered$("[readonly]").dblclick( function(){ console.log("double clicked") });//log - double clicked

Answer 3

禁用意味着在提交表单时不会提交来自该表单元素的任何数据。只读意味着元素中的任何数据都将被提交，但用户不能更改它。

例如：

<input type="text" name="yourname" value="Bob" readonly="readonly" />

这将提交元素“Yourname”的值“Bob”。

<input type="text" name="yourname" value="Bob" disabled="disabled" />

这将不提交任何元素“您的名字”。