对于HTML表单输入字段,disabled =“disabled”和readonly =“readonly”之间的区别是什么?

时间:2011-10-11 18:28:43

标签: html cross-browser

我已经对此有所了解,但我似乎无法找到关于不同浏览器如何处理事物的任何可靠信息。

6 个答案:

答案 0 :(得分:645)

readonly元素不可编辑,但会在相应的form提交时发送。 disabled元素不可编辑,不会在提交时发送。另一个区别是readonly元素可以被聚焦(并且在“通过表单”选项卡时聚焦),而disabled元素则不能。

this great article the definition by w3c中详细了解此信息。引用重要部分:

  

主要差异

     

已禁用属性

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

只读属性

     
      
  • 并非所有表单元素都具有只读属性。最值得注意的是,<SELECT><OPTION><BUTTON>元素没有readonly   属性(尽管它们都具有禁用的属性)
  •   
  • 浏览器不提供默认的重写视觉反馈,表单元素是只读的。 (这可能是一个问题......见下文。)
  •   
  • 具有readonly属性集的表单元素将传递给表单处理器。
  •   
  • 只读表单元素可以获得焦点
  •   
  • 只读表单元素包含在选项卡式导航中。
  •   

答案 1 :(得分:83)

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

以下都不会被触发。

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

答案 2 :(得分:29)

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

例如:

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

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

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

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

答案 3 :(得分:8)

具有已禁用属性的元素将不会提交,或者可能会说其值不会随请求一起发布。

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

差分

  • 已禁用的控件无法获得焦点。
  • 在标签导航中跳过已禁用的控件。
  • 无法成功发布已禁用的控件。

如果您想发布字段数据,请使用readonly属性。

<input type="textbox" name="field" value="field" readonly="readonly" />
  • 只读元素获得焦点,但用户无法修改。
  • 只读元素包含在标签导航中。
  • 只读元素已成功发布。

答案 4 :(得分:3)

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

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

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

  

无法修改只读字段。但是,用户可以选中它,突出显示它,然后从中复制文本。

答案 5 :(得分:2)

如果在清除(重置)表单时需要保留禁用的文本框的值,则必须使用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"

的情况下,值将不会保留