disabled与readonly区别详解
2026-05-15 18:03:57
0浏览
收藏
本文深入剖析了HTML中disabled与readonly属性的核心区别：disabled会彻底阻止元素参与表单提交、失去焦点、无法复制，且语义上表示功能禁用；而readonly仅限制编辑，仍可聚焦、选中、复制并正常提交值，适用于展示型只读场景。文章直击开发常见踩坑点——如后端收不到字段常因误用disabled替代readonly，并详解二者在控件支持范围（readonly仅对text/password/textarea有效）、批量控制（fieldset对disabled天然支持）、可访问性（disabled自动添加aria-disabled，readonly保持无障碍交互）、打印与高对比度模式表现及跨浏览器兼容性等方面的本质差异，为表单交互设计提供精准、可靠、兼顾用户体验与工程健壮性的实践指南。
disabled 和 readonly 的提交行为差异
表单提交时，disabled 元素的值**完全不会出现在 FormData 或序列化结果里**，哪怕你用 JS 改了它的 value；而 readonly 元素的值照常提交。这是最常踩坑的地方：后端收不到字段，排查半天发现前端误用了 disabled。
常见错误现象：
- 用户填完表单点提交，后端日志显示某个字段为空 → 前端该字段用了
disabled而非readonly - 用
form.serialize()或new FormData(form)拿不到值 → 检查是否误加了disabled
使用场景判断：
- 展示型只读（如预填手机号、订单金额）→ 用
readonly - 功能锁死（如协议未勾选时禁用提交按钮）→ 用
disabled - 需要复制内容的只读字段（如 API Key 展示）→ 必须用
readonly，disabled不支持聚焦和复制
哪些控件支持 readonly？
readonly 只对 、、