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

我已经阅读了一些，但是似乎找不到关于不同的浏览器如何对待事物的可靠信息。

一个readonly元素就是不可编辑，但是当根据被发送form的提交。一个disabled元素是不可编辑和提交不发送电子邮件。另一个区别是readonly元素可以集中（而在通过表格“制表”时要集中）元素不能集中disabled。

在这篇很棒的文章或w3c的定义中阅读更多有关此的内容。引用重要的部分：

关键差异

禁用属性

• 禁用的表单元素的值不会传递到处理器方法。W3C将此称为成功元素（其工作方式类似于未选中的表单复选框。）
• 某些浏览器可能会为禁用的表单元素覆盖或提供默认样式。（灰色或浮雕文字）Internet Explorer 5.5对此特别讨厌。
• 禁用的表单元素不会获得焦点。
• 在选项卡导航中会跳过禁用的表单元素。

只读属性

• 并非所有表单元素都具有只读属性。最值得注意的是<SELECT>，，<OPTION>和<BUTTON>元素没有只读属性（尽管它们都有禁用的属性）
• 浏览器不提供表单元素为只读的默认覆盖的视觉反馈。（这可能是一个问题……请参阅下文。）
• 设置了readonly属性的表单元素将被传递到表单处理器。
• 只读表单元素可以获得焦点
• 选项卡式导航中包含只读表单元素。

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

以下任何都不会触发。

$("[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

禁用表示提交表单时不会提交该表单元素中的任何数据。只读意味着将提交元素中的任何数据，但用户无法更改。

例如：

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

这将为元素“您的名字”提交值“ Bob”。

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

这将不会为元素“您的姓名”提交任何内容。

与其他答案相同（禁用的不发送到服务器，只读的），但是某些浏览器阻止突出显示已禁用的表单，而只读的仍可以突出显示（并复制）。

http://www.w3schools.com/tags/att_input_disabled.asp

http://www.w3schools.com/tags/att_input_readonly.asp

只读字段无法修改。但是，用户可以对其进行标签，突出显示并从中复制文本。

如果在清除（重置）表单后需要保留禁用的文本框的值， disabled = "disabled"则必须使用它，因为只读文本框不会保留该值

例如：

的HTML

文本框

<input type="text" id="disabledText" name="randombox" value="demo" disabled="disabled" />

复位按钮

<button type="reset" id="clearButton">Clear</button>

在上面的示例中，当按清除按钮时，禁用的文本值将保留在表单中。在以下情况下将不保留价值input type = "text" readonly="readonly"