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

我已经阅读了一些，但我似乎无法find关于不同的浏览器如何处理事情的任何可靠的。 我正在构build一个应用程序，必须符合508条款（屏幕阅读器可访问），并清除回到IE 6。

readonly元素是不可编辑的，但是当相应的form提交时会被发送。 disabled元素是不可编辑的，不会在提交时发送。 另一个区别是， readonly元素可以集中（当通过表单“标签”的时候可以集中），而disabled元素不能。

在这篇伟大的文章或w3c的定义阅读更多关于这个。 引用重要部分：

主要差异

Disabled属性

  • 禁用表单元素的值不会传递给处理器方法。 W3C称这是一个成功的元素（这个工作类似于没有被选中的checkbox）。
  • 某些浏览器可能会覆盖或为禁用的表单元素提供默认样式。 （灰色或浮雕文字）Internet Explorer 5.5对此特别讨厌。
  • 禁用的表单元素不会获得焦点。
  • 禁用的表单元素在Tab键导航中被跳过。

只读属性

  • 并非所有表单元素都具有只读属性。 最值得注意的是， <SELECT> ， <OPTION>和<BUTTON>元素没有只读属性（尽pipe你的属性都是禁用的）
  • 浏览器不提供表单元素只读的默认覆盖视觉反馈。 （这可能是一个问题…见下文。）
  • 具有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" />

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

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

这将不会提交元素“yourname”。

带有“已禁用”属性的元素不会提交，或者可以说他们的值不会与请求一起发布。

即 

 <input type="textbox" name="field" value="field" disabled="disabled" />

区别

  • 禁用的控件不会收到焦点。
  • 禁用的控件在标签导航中被跳过。
  • 禁用的控件无法成功发布。

如果您想要发布您的字段的数据，请使用只读属性。

即 

 <input type="textbox" name="field" value="field" readonly="readonly" />
  • 只读元素获得焦点，但不能被用户修改。
  • Tab键导航中包含只读元素。
  • 只读元素已成功发布。

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

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

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

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

Interesting Posts