readonly字段值会提交、可聚焦可复制，disabled则不提交、不可聚焦；不生效主因是JS动态覆盖、框架props未透传或CSS干扰。
直接加 readonly 属性即可生效，但要注意它和 disabled 的行为差异——只读输入框仍能提交值、保持焦点、参与表单序列化，而禁用则不能。
为什么 readonly 有时不生效？
常见原因不是语法错，而是被 JavaScript 动态覆盖或 CSS 干扰：
-
readonly是布尔属性，写成readonly="false"或readonly=""都算“启用”，必须彻底移除该属性才能取消只读 - 某些 UI 框架（如 Ant Design、Element Plus）会封装原生
<input>，直接在标签上写readonly可能被组件 props 覆盖，应改用:readonly="true"（Vue）或readOnly={true}（React） - CSS 中设置了
pointer-events: none或user-select: none会让视觉上像只读，但实际未触发原生只读逻辑，表单仍可编辑
readonly 和 disabled 关键区别在哪？
选错会导致表单数据丢失或交互异常：
- 提交时：
readonly字段的value会随表单一起发送；disabled字段的值**不会提交** - 焦点与事件：
readonly输入框可获得焦点、响应focus/click，也能监听input（但用户无法修改）；disabled则完全失焦、事件不触发 - 样式表现：
disabled默认变灰、光标为not-allowed；readonly默认无样式变化，需手动加background-color: #f5f5f5等提升辨识度
如何用 JS 动态控制只读状态？
避免直接操作字符串属性，用 DOM API 更可靠：
// 正确：用 setAttribute / removeAttribute
inputEl.setAttribute('readonly', 'readonly'); // 启用
inputEl.removeAttribute('readonly'); // 关闭
// 错误：赋值布尔值或空字符串不一定生效
inputEl.readonly = true; // ❌ 大部分浏览器不认这个写法
inputEl.setAttribute('readonly', ''); // ✅ 可行，但语义不如 'readonly'
在 Vue/React 中优先走响应式绑定，不要混合 DOM 操作；若需兼容旧版 IE，注意 removeAttribute('readonly') 在 IE8+ 安全，但 IE7 及以下需用 inputEl.readOnly = false（注意大小写）。
真正容易被忽略的是表单重置行为：readonly 字段在 <form></form> 调用 reset() 时**会被还原为初始 value**，这点和 disabled 不同——后者重置时保持当前值不变。如果业务依赖初始值锁定，得额外监听 reset 事件做干预。
