disabled=“disabled”和disabled=“disabled”有什么区别？和 readonly=“只读” HTML 表单输入字段？

Question

我读过一些相关内容，但我似乎找不到任何关于不同浏览器如何处理事物的可靠信息。

Answer 1

readonly 元素不可编辑，但会在相应的 form 提交时发送。 disabled 元素不可编辑，也不会在提交时发送。另一个区别是 readonly 元素可以获得焦点（并且在通过表单进行“Tab 键切换”时获得焦点），而 disabled 元素则不能。

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

主要区别

禁用属性

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

只读属性

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

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 则会被触发。

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

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

Answer 4

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

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

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

无法修改只读字段。但是，用户可以使用 Tab 键选中它、突出显示它并从中复制文本。

Answer 5

如果清除（重置）表单时需要保留禁用文本框的值，则必须使用 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" 的情况下不会保留值

Answer 6

禁用和只读之间的区别在于，只读控件仍然可以运行并且仍然可以获得焦点，而禁用的控件无法接收焦点并且不会随表单一起提交

Answer 7

可以设置 readonly 属性以防止用户更改值，直到满足其他一些条件，而可以设置 invalid 属性以防止用户使用该元素

Answer 8

基本上，只读属性意味着用户无法编辑该元素，但会与表单一起发送。
然而，禁用属性意味着用户无法编辑该元素，并且不会与表单一起发送。 （PS 禁用元素的不透明度也较低）