readonly与disabled区别全解析

你是否曾因表单中“只读”字段提交失败或交互异常而困惑？readonly 与 disabled 表面相似，实则本质不同：readonly 让用户能聚焦、选中、复制内容且值照常提交，但仅对文本类控件生效；disabled 则彻底禁用交互、阻止焦点与提交，适用于所有表单元素——选错一个，轻则后端收不到关键数据，重则破坏无障碍访问、绕过校验逻辑甚至引发框架绑定失效。真正决定用哪个的，不是视觉效果，而是你的核心需求：要“不可编辑但必须提交”，就用 readonly（辅以样式提示）；要“完全禁用且无需提交”，才选 disabled；若需禁用却仍提交，则必须配合 hidden 字段。理解这一区别，是写出健壮、可访问、可维护表单的第一步。

只读字段用 readonly 还是 disabled？看表单提交和交互需求

直接结论：readonly 保留字段值参与表单提交，用户不能编辑但可聚焦、可选中、可复制；disabled 则完全禁用交互，且该字段的值**不会被提交**到后端。选错会导致后端收不到数据或前端操作异常。

readonly 的典型使用场景和限制

适用于「展示+需提交」的只读内容，比如订单号、用户ID、预填但不可改的邮箱等。

• readonly 只对 <input type="text">、<input type="password">、<textarea> 有效，对 <select>、、<input type="checkbox"> 无效（浏览器忽略）
• 元素仍能获得焦点（tabindex 生效），支持 Ctrl+A 全选、Ctrl+C 复制，这对用户查信息很友好
• 样式上默认不灰化，如需视觉提示，得手动加 CSS：input[readonly] { background-color: #f5f5f5; cursor: not-allowed; }
• JS 中仍可通过 element.value = 'xxx' 修改值，readonly 是纯 HTML 层面约束

disabled 的行为特点和常见误用

disabled 是更彻底的禁用，但代价是字段值从表单序列化中被剔除——哪怕你在 JS 里设了 input.value = '123'，提交时也看不到它。

• 所有表单控件都支持 disabled，包括 <select>、<input type="radio">、
• 元素无法聚焦、无法 tab 切入、无法复制，键盘鼠标事件全部被拦截
• 默认渲染为灰色（opacity 或 color 变化因浏览器而异），但样式可覆盖；注意：某些屏幕阅读器会跳过 disabled 元素，影响无障碍
• 如果需要“禁用但提交值”，必须换思路：用隐藏域 <input type="hidden" name="xxx" value="yyy"> 配合 disabled 的同名可见字段，或改用 readonly + 样式模拟禁用感

React/Vue 等框架中容易踩的坑

框架绑定属性时，readonly 和 disabled 都是布尔 prop，但语义混淆极易发生：

• Vue 模板里写 :disabled="true" 没问题，但若写成 :readonly="someCondition" 却忘了该属性只对文本类控件生效，<select :readonly="true"> 实际毫无作用
• React 中用 readOnly（驼峰），不是 readonly；写成 readonly={true} 会被当字符串处理，导致属性始终存在但值为 "true"，浏览器误判为真值而启用只读
• 服务端渲染（SSR）时，若初始状态用 disabled，但客户端 JS 后续未同步更新对应隐藏域，就可能造成提交数据缺失——这种不一致很难调试

最常被忽略的一点：表单验证库（如 Yup、Zod）通常不校验 disabled 字段，但会校验 readonly 字段——如果你靠 disabled “绕过”校验，实际只是掩盖了逻辑漏洞。

终于介绍完啦！小伙伴们，这篇关于《readonly与disabled区别全解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！