HTML 表单输入字段的 disabled="disabled" 和 readonly="readonly" 之间有什么区别？

What's the difference between disabled="disabled" and readonly="readonly" for HTML form input fields?

提问by Andy

I have read a bit on this, but I can't seem to find anything solid about how different browsers treat things.

我已经阅读了一些关于此的内容，但我似乎无法找到任何关于不同浏览器如何处理事物的可靠信息。

回答by oezi

A readonlyelement is just not editable, but gets sent when the according formsubmits. A disabledelement isn't editable and isn't sent on submit. Another difference is that readonlyelements can be focused (and getting focused when "tabbing" through a form) while disabledelements can't.

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

Read more about this in this great articleor the definition by w3c. To quote the important part:

在这篇很棒的文章或w3c 的定义中阅读更多相关信息。引用重要部分：

Key Differences

The Disabled attribute

• Values for disabled form elements are not passed to the processor method. The W3C calls this a successful element.(This works similar to form check boxes that are not checked.)
• Some browsers may override or provide default styling for disabled form elements. (Gray out or emboss text) Internet Explorer 5.5 is particularly nasty about this.
• Disabled form elements do not receive focus.
• Disabled form elements are skipped in tabbing navigation.

The Read Only Attribute

• Not all form elements have a readonly attribute. Most notable, the <SELECT>, <OPTION>, and <BUTTON>elements do not have readonly attributes (although they both have disabled attributes)
• Browsers provide no default overridden visual feedback that the form element is read only. (This can be a problem… see below.)
• Form elements with the readonly attribute set will get passed to the form processor.
• Read only form elements can receive the focus
• Read only form elements are included in tabbed navigation.

主要区别

禁用属性

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

只读属性

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

回答by Hrishabh Gupta

No events get triggered when the element is having disabled attribute.

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

None of the below will get triggered.

以下任何一项都不会被触发。

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

While readonly will be triggered.

而 readonly 将被触发。

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

回答by Michael Irigoyen

Disabled means that no data from that form element will be submitted when the form is submitted. Read-only means any data from within the element will be submitted, but it cannot be changed by the user.

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

For example:

例如：

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

This will submit the value "Bob" for the element "yourname".

这将为元素“yourname”提交值“Bob”。

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

This will submit nothing for the element "yourname".

这不会为元素“yourname”提交任何内容。

回答by Tim

Same as the other answers (disabled isn't sent to the server, readonly is) but some browsers prevent highlighting of a disabled form, while read-only can still be highlighted (and copied).

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

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

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

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

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

A read-only field cannot be modified. However, a user can tab to it, highlight it, and copy the text from it.

不能修改只读字段。但是，用户可以选择它，突出显示它，并从中复制文本。

回答by Syed

If the value of a disabled textbox needs to be retained when a form is cleared (reset), disabled = "disabled"has to be used, as read-only textbox will not retain the value

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

For Example:

例如：

HTML

HTML

Textbox

文本框

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

Reset button

复位按钮

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

In the above example, when Clear button is pressed, disabled text value will be retained in the form. Value will not be retained in the case of input type = "text" readonly="readonly"

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