对于HTML表单输入字段，禁用=“禁用”和readonly=“readonly”有什么区别？

Question

对于HTML表单输入字段，禁用=“禁用”和readonly=“readonly”有什么区别？

我读过一些关于这一点的文章，但我似乎找不到任何关于不同浏览器如何对待事物的确凿信息。

Answer 1

A&nbsp;readonly元素是不可编辑的，但是在form提交。一个disabled元素是不可编辑的，也不会在提交时发送。另一个不同是readonly元素可以聚焦(并且在通过窗体“选项卡”时获得焦点)disabled元素不能。阅读更多有关这方面的资料这篇伟大的文章或W3C的定义..引用以下重要部分：关键差异禁用属性禁用窗体元素的值不会传递给处理器方法。W3C称这是一个成功的元素。(这类似于未选中的表单复选框。)有些浏览器可能会覆盖或提供禁用窗体元素的默认样式。(灰色或浮雕文本)InternetExplorer 5.5对此特别反感。禁用的表单元素不会接收焦点。在选项卡导航中跳过禁用的表单元素。只读属性并非所有表单元素都具有只读属性。最值得注意的是<SELECT>&nbsp;,&nbsp;<OPTION>，和<BUTTON>元素没有只读属性(尽管它们都禁用了属性)浏览器不提供窗体元素被只读的默认重写视觉反馈。(这可能是一个问题，…见下文)具有readonly属性集的表单元素将被传递给表单处理器。只读表单元素可以接收焦点。选项卡导航中包括只读表单元素。

Answer 2

当元素具有禁用属性时，不会触发任何事件。下面的任何一个都不会触发。$("[disabled]").click(&nbsp;function(){&nbsp;console.log("clicked")&nbsp;});//No&nbsp;Impact$("[disabled]").hover(&nbsp;function(){&nbsp;console.log("hovered")&nbsp;});//No&nbsp;Impact$("[disabled]").dblclick(&nbsp;function(){&nbsp;console.log("double&nbsp;clicked")&nbsp;});//No&nbsp;Impact而只读将被触发。$("[readonly]").click(&nbsp;function(){&nbsp;console.log("clicked")&nbsp;});//log&nbsp;-&nbsp;clicked$("[readonly]").hover(&nbsp;function(){&nbsp;console.log("hovered")&nbsp;});//log&nbsp;-&nbsp;hovered$("[readonly]").dblclick(&nbsp;function(){&nbsp;console.log("double&nbsp;clicked")&nbsp;});//log&nbsp;-&nbsp;double&nbsp;clicked

Answer 3

禁用意味着在提交表单时不会提交来自该表单元素的任何数据。只读意味着元素中的任何数据都将被提交，但用户不能更改它。例如：<input&nbsp;type="text"&nbsp;name="yourname"&nbsp;value="Bob"&nbsp;readonly="readonly"&nbsp;/>这将提交元素“Yourname”的值“Bob”。<input&nbsp;type="text"&nbsp;name="yourname"&nbsp;value="Bob"&nbsp;disabled="disabled"&nbsp;/>这将不提交任何元素“您的名字”。