admin管理员组文章数量:1640619
一、两者的联系
1、两个属性都可以作用于input等表单元素上,都使得元素成为“不可用”的状态;
2、两者的字面意义:
(1)readonly表示“只读”,一般表示对于文字内容只读,即不可更改内容,对于非文字的表单“只读”与“不只读”似乎没有啥区别;
(2)disabled表示“使残废,使无效”,都残废了,不管是什么内容,都是无效的。
二、两者的区别:
1、readonly和disabled作用元素的范围不同:
由上图可见,readonly并没有对input[type=“button”]产生作用,按钮效果仍然在,并没有“不可用”;
而disabled直接对input[type=“button”]的按钮效果产生作用,导致按钮不可点击。
两者的作用范围区别:
- disabled属性可以作用于所有的表单元素。
- readonly属性只对、、和等可以输入的表单元素有效。
2、readonly和disabled对元素的作用程度不同
通过上面的测试可以知道,disabled属性阻止对元素的一切操作,例如获取焦点,点击事件等等;readonly属性只是将元素设置为只读,其他操作正常。
3、readonly和disabled对表单提交的作用不同
- disabled属性可以让表单元素的值无法被提交。
- readonly属性则不影响提交问题。
三、总结
-
readonly 属性规定输入字段为只读。
只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。
readonly 属性可与 input type="text"或 input type="password"配合使用。 -
disabled 属性规定应该禁用 input 元素。
被禁用的 input 元素既不可用,也不可点击。可以设置 disabled 属性,直到满足某些其他的条件为止(比如选择了一个复选框等等)。然后,就需要通过 JavaScript 来删除 disabled 值,将 input 元素的值切换为可用。
注释:disabled 属性无法与 input type="hidden"一起使用。
版权声明:本文标题:css readonly和disabled的区别 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729318044a1195540.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论