readonly属性使文本类input和textarea不可编辑但可提交，而disabled禁用所有表单元素且不提交值；readonly支持聚焦、选中与复制，disabled则完全禁用交互。
用 readonly 属性能有效防止用户修改已填内容，同时确保该值仍随表单提交——这是它和 disabled 最关键的区别。
哪些元素支持 readonly
只对以下两类元素生效：
-
：仅限text、password、email、tel、url、search、date等文本类类型（checkbox、radio、file不支持） -
：完全支持
不支持的元素（如 select、button）设了 readonly 会被浏览器忽略，需改用 disabled 或其他逻辑控制。
正确写法与常见误区
HTML 中直接添加属性即可，无需赋值：
- ✅ 正确：
- ❌ 错误：
或（布尔属性不接受字符串值） - ⚠️ XHTML 要求写全：
readonly="readonly"，但现代 HTML5 用readonly即可
注意：加了 readonly 后，字段依然可获得焦点、可选中、可复制，只是不能输入或删除——这点常被误认为“没起作用”。
配合 JavaScript 动态控制
适合需要条件解锁的场景（比如勾选确认框后才允许编辑）：
- 设为只读：
document.getElementById("id").readOnly = true或.setAttribute("readonly", "readonly") - 恢复可编辑：
document.getElementById("id").removeAttribute("readonly")（比设readOnly = false更稳妥，尤其在旧 Safari 中） - 示例：用户勾选“我已核对信息”复选框后，才移除姓名字段的只读状态
必须搭配服务器端验证
readonly 是纯前端防护，无法阻止恶意用户通过开发者工具删掉该属性并修改内容：
- 浏览器提交时，该字段的值仍会发送到后端（这点和
disabled不同） - 所以后端必须校验该字段是否被非法篡改（例如对比数据库原始值、检查时间戳或签名）
- 不能只依赖前端限制做业务逻辑判断，否则存在安全风险
简单说：readonly 是用户体验层的友好锁定，不是数据安全层的保护锁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
