readonly和disabled区别详解
2026-05-26 11:54:28
0浏览
收藏
你是否遇到过后端收不到表单字段的诡异问题？八成是因为混淆了 `readonly` 和 `disabled`——前者让字段“只读但必传”，值照常进入请求体，支持聚焦、复制和屏幕阅读器访问；后者则直接从提交数据中剔除该字段，无论JS如何修改值都无效。更关键的是，`readonly` 仅对 `input`、`textarea`、`select`（部分浏览器）等有限元素生效，而 `button`、`div` 等不支持的元素需用文本模拟或隐藏域补值；动态控制时还要避开 `readonly` 在 Safari 的兼容陷阱，且绝不能同时设置两者（`disabled` 会完全覆盖 `readonly`）。真正棘手的 bug 往往藏在条件逻辑中：某条流程路径下 JS 静默添加了 `disabled`，测试未覆盖，上线后才暴露出“缺失必传参数”的致命错误——理解这二者的本质差异，是保障表单数据完整性的第一道防线。
后端收不到字段？八成是把 readonly 写成了 disabled。这不是样式问题，是表单数据是否进请求体的根本分水岭。
提交时值会不会发到后端
这是最致命的判断依据，直接决定用哪个属性。
disabled的控件：无论你用form.serialize()、new FormData(form)还是原生submit，它的name和value都不会出现在请求里——浏览器直接过滤掉，JS 改了value也白搭readonly的控件：值照常提交，request.getParameter("id")或等价方式能拿到，适合预填 ID、订单号、计算结果等“只读但必传”场景- 常见错误现象：
提交后后端日志查无此字段；测试通过但上线报“缺少必传参数”，基本就是这原因
哪些元素支持 readonly
readonly 不是万能锁，它只对特定元素生效，硬加在不支持的标签上等于没写。
- 有效：
、、、