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

我读了一些这方面的文章，但我似乎找不到任何关于不同浏览器如何处理事情的可靠信息。

288240 次浏览
小开
最佳答案

readonly元素是不可编辑的，但在form提交时被发送。disabled元素是不可编辑的，在提交时不会被发送。另一个区别是readonly元素可以被聚焦(并且在“tab”遍历表单时被聚焦)，而disabled元素不能。

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

关键的不同点

Disabled属性

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

只读属性

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

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

例如:

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

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

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

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

小开

与其他答案相同(disabled不会发送到服务器，readonly会)，但一些浏览器阻止高亮显示禁用的表单，而read-only仍然可以高亮显示(并复制)。

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

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

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

小开

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

下面这些都不会被触发。

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

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

例如:

超文本标记语言

文本框

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

重置按钮

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

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

小开

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

小开

disabled和readonly之间的区别是只读控件仍然可以工作，仍然是可聚焦的，而disabled控件不能接收焦点，也不能与表单一起提交


提交答案