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

我已经阅读了一些,但是似乎找不到关于不同的浏览器如何对待事物的可靠信息。


#1楼

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

以下任何都不会触发。

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

#2楼

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

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

区别

  • 禁用的控件不会获得焦点。
  • 在选项卡导航中会跳过禁用的控件。
  • 禁用的控件无法成功发布。

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

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

#3楼

readonly元素只是不可编辑的,而是在提交相应form时发送的。 disabled元素不可编辑,也不会在提交时发送。 另一个不同之处在于, readonly元素可以集中显示(并且在通过表格“制表”时获得焦点),而disabled元素则不能。

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

关键差异

禁用属性

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

只读属性

  • 并非所有表单元素都具有只读属性。 最值得注意的是, <SELECT><OPTION><BUTTON>元素没有只读属性(尽管它们都有禁用的属性)
  • 浏览器不提供表单元素为只读的默认覆盖的视觉反馈。 (这可能是一个问题……请参阅下文。)
  • 设置了readonly属性的表单元素将被传递到表单处理器。
  • 只读的表单元素可以得到关注
  • 选项卡式导航中包含只读表单元素。

#4楼

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

例如:

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

这将为元素“您的名字”提交值“ Bob”。

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

这将不会为元素“您的姓名”提交任何内容。


#5楼

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

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

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

只读字段无法修改。 但是,用户可以对其进行标签,突出显示并从中复制文本。

发布了0 篇原创文章 · 获赞 2 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/asdfgh0077/article/details/104211452