readonly属性使文本类input和textarea不可编辑但可提交，而disabled禁用所有表单元素且不提交值；readonly支持聚焦、选中与复制，disabled则完全禁用交互。
用 readonly 属性能有效防止用户修改已填内容，同时确保该值仍随表单提交——这是它和 disabled 最关键的区别。
哪些元素支持 readonly
只对以下两类元素生效：
-
<input>：仅限text、password、email、tel、url、search、date等文本类类型（checkbox、radio、file不支持） -
<textarea></textarea>：完全支持
不支持的元素（如 select、button）设了 readonly 会被浏览器忽略，需改用 disabled 或其他逻辑控制。
正确写法与常见误区
HTML 中直接添加属性即可，无需赋值：
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- ✅ 正确：
<input type="text" value="U-7890" name="user_code" readonly> - ❌ 错误：
<input ... readonly>或<input ... readonly>（布尔属性不接受字符串值） - ⚠️ 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 是用户体验层的友好锁定，不是数据安全层的保护锁。
