应直接使用 element.readOnly = true 或 false 设置只读状态，因 readonly 是布尔属性，旧版 Safari 中 setAttribute('readonly', 'readonly') 无法同步 DOM 属性，导致输入框仍可编辑。
直接用 element.readOnly = true 或 false，别碰 setAttribute 和 removeAttribute —— 后者在 Safari 15 及更早版本里会失效。
为什么不能用 setAttribute('readonly', 'readonly')
这个写法看似符合 HTML 属性习惯，但实际在部分旧版 Safari 中无法正确触发只读状态切换，表现为：JS 执行了、DOM 属性也改了，但输入框仍可编辑。根本原因是 readonly 是布尔属性，浏览器内部依赖的是 DOM 属性 readOnly（驼峰）的布尔值，而非 attribute 的存在与否。用 setAttribute 修改的是 HTML attribute，不保证同步更新底层 DOM 属性。
- ✅ 正确写法：
inputEl.readOnly = true（设为只读）或inputEl.readOnly = false（解除只读） - ⚠️ 不推荐：
inputEl.setAttribute('readonly', 'readonly')或inputEl.removeAttribute('readonly') - ❌ 错误写法：
inputEl.readonly = true（小写readonly是无效属性名，Safari 不认）
如何确保页面加载时状态就准确
很多 bug 出现在“复选框默认未勾选，但 input 没初始化为 readonly”。事件监听器（如 change）只响应用户操作，不会自动执行一次初始化逻辑。
- 把状态同步逻辑抽成函数，比如
syncReadOnly() - 在
DOMContentLoaded里调用它，确保首次渲染即生效 - 再给复选框绑定
change事件，复用同一函数 - 避免 HTML 里硬写
readonly="true"—— 非标准写法，readonly是布尔属性，有就生效，值无关
切换时容易忽略的焦点和无障碍问题
从可编辑切到 readOnly = true 后，如果用户正聚焦在这个 input 上，它依然保持焦点，但键盘输入被拦截。这会导致 Tab 导航“卡住”——按 Tab 时它不会跳走，因为不是 disabled，但用户又输不了，体验断层。
立即学习“前端免费学习笔记（深入）”；
- 建议在设为只读前主动调用
inputEl.blur()，清掉残留焦点 - 若需保留视觉聚焦态（比如高亮边框），用 CSS 类 +
:focus-within控制，别依赖原生 focus 状态 - 屏幕阅读器对
readOnly的播报是“只读”，对disabled是“已禁用”，语义不同，别混用 - 检查状态必须用
inputEl.readOnly，而不是inputEl.hasAttribute('readonly')—— 后者可能滞后或不准
哪些 input 类型不支持 readonly
readonly 只对文本类控件生效，其他类型加了也白加，浏览器直接忽略。
- ✅ 支持：
text、email、number、date、datetime-local、search、url、tel、password、textarea - ❌ 不支持：
checkbox、radio、file、hidden、select、button - ⚠️ 特别注意：
date在 iOS Safari 中常忽略readonly，得额外监听click并e.preventDefault()阻止日历弹出
真正麻烦的不是写一行 .readOnly = false，而是每次 DOM 动态增删、表单块显隐后，是否还严格维护着 readOnly 和 disabled 的互斥性、焦点链完整性、以及后端能否稳定收到该字段的值。
