关于input元素的readonly和disabled的区别，在查阅学习时，发现网上写的都比较零碎，于是决定对这一块知识点进行汇集总结，因此写此文章，也希望对跟我一样，不太了解readonly和disabled的你有所帮助，建议收藏！！
目录
一、介绍及作用
- readonly 把输入的字段设为只读，但是没有禁用 readonly=” readonly”，将元素设置为只读，其他操作正常。
- disabled 禁用一个input元素。 disabled=”disabled”，阻止对元素的一切操作，例如获取焦点，点击事件等。
readOnly和disabled的作用：是使用户不能够更改表单域中的内容。
二、用法
<input type="text" name="name" value="xxx" disabled="true"/>
<input type="text" name="name" value="xxx" readonly="true"/>这两种写法都会使显示出来的文本框不能输入文字，都能做到使用户不能够更改表单域中的内容。
三、区别
1、外观变化不同
- dsiabled：会使文本框及字体变灰。
- readonly：只是使文本框不能输入，外观没有变化。
注: disabled可用readonly代替,加上灰色背景background-color:#cccccc
2、作用范围不同
- disabled：范围更大，对所有的表单元素都有效，,包括select,radio,checkbox,button等。
- readonly：范围较小，仅能够阻止修改部分表单的值，只对<input type=”text”>、<textarea>和<input type=”password”>有效。
3、对元素的影响程度不同
- disabled：阻止对元素的一切操作，阻止修改input表单中的值，连button submit都不能够点击。
- readonly：只是将元素设置为只读，其他操作正常。
4、表达提交情况不同
- disabled：将表单以post或者get的方式提交的话，值不会被传递出去，输入域的值也不能够通过form表单传递，表单元素的值无法被提交。
- readonly：可以提交表单，值也照样传递，不影响提交。
5、代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//disabled 灰掉
//disabled 写在标签里 可以直接写disabled 也可以写 disabled="disabled"
//在js中 操作disabled 设置true 或 false
//form提交时 不作为表单域 传输值
//适用于 所有标签对象
//readonly 只读
//readonly 写在标签里 readonly 也可以写 readonly="readonly"
//在js中 readonly 设置true 或 false
//form提交时 作为表单域 传输值
//适用于 textArea password text 这种 文本
</script>
</head>
<body>
<form action="test.html" method="get">
<!--<input type="text" name="disa" value="aabbcc" disabled="disabled" />-->
<input type="text" name="read" value="aabbcc" readonly="readonly" />
<input type="submit" value="提交" />
</form>
</body>
</html>四、常用情况
1、关于readonly
- 在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在提交时需要传递该值，此时将属性设置为readonly。
2、关于disabled
- 当用户正式提交了表单后需要等待管理员的信息验证，不允许用户再更改表单中的数据，而是只能够查看，由于disabled的作用元素范围大，所以此时应该使用disabled，但同时应该注意的是要将submit button也disabled掉，否则只要用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值会被清除。
- 在用户按了提交按钮后，利用javascript将提交按钮disabled掉，可防止在网络条件比较差的环境下，用户反复点击提交按钮导致数据冗余地存入数据库。
- 一般情况下，为防止客户在网络环境较差时，重复提交表单，当用户点完提交，我们就用js设置submit按钮为disabled。
感谢阅读，(^.^)Y Ya!!欢迎关注收藏，期待你我顶峰相见，加油！！
今天的文章readonly与disable的区别_readonly属性如何设置分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/83890.html
