直接在<input>标签写readonly属性即可生效，它是布尔属性，无需赋值；readonly="true"不规范，readonly="false"反而启用只读；与disabled区别在于readonly可聚焦、可选中、值会提交，而disabled不可交互且不提交。
input 的 readonly 属性怎么写才生效
直接在 <input> 标签里加 readonly 属性即可，它是个布尔属性，不需要赋值。写成 readonly="true" 或 readonly="readonly" 虽然浏览器通常也认，但不符合 HTML 规范，可能在某些严格校验场景报错。
常见错误是误写成 readonly="false" —— 这样反而会启用只读（因为只要属性存在就生效），或者和 disabled 混用导致表单提交行为异常。
-
<input type="text" value="已填内容" readonly>✅ 正确写法 -
<input type="text" readonly="true">⚠️ 不推荐，冗余且非标准 -
<input type="text" readonly="false">❌ 错误：只要写了readonly就只读，值真假无关
readonly 和 disabled 的关键区别在哪
两者都让输入框不可编辑，但语义和行为完全不同：readonly 元素仍可聚焦、可被选中、其值会随表单一起提交；disabled 则完全脱离交互流，无法聚焦，也不会出现在 FormData 或序列化结果中。
典型误用场景：用 disabled 显示用户 ID 后，后端收不到该字段 —— 其实该用 readonly。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 需要保留值参与提交？→ 用
readonly - 需要彻底禁用并视觉弱化？→ 用
disabled - 想阻止聚焦但保留提交？→
readonly+tabindex="-1"
JavaScript 动态控制 readonly 状态的正确方式
不能用 .setAttribute('readonly', 'readonly') 或 .removeAttribute('readonly') 来切换 —— 这种操作在部分浏览器（尤其是旧版 Safari）上不稳定。应该直接操作 DOM 属性 .readOnly（注意大小写）。
示例：document.getElementById('myInput').readOnly = true; 或 false。这个属性是可写的，且实时生效。
- 设置只读：
inputEl.readOnly = true; - 取消只读：
inputEl.readOnly = false; - 检查状态：
if (inputEl.readOnly) { ... }，不是inputEl.hasAttribute('readonly')
readonly 在不同 input 类型中的兼容性表现
readonly 对 type="text"、"email"、"number"、"search" 等文本类输入有效；但对 type="checkbox"、"radio"、"file" 无效（这些类型不支持该属性，设了也没反应）。type="date" 和 "datetime-local" 在多数现代浏览器中支持 readonly，但 iOS Safari 会忽略 —— 如果需兼容，得配合 JS 阻止点击或弹出日历。
- 安全起见，对日期类控件建议额外监听
click并e.preventDefault() -
type="hidden"不需要readonly—— 它本就不显示，也不允许用户编辑 - 富文本
<textarea>支持readonly，行为与input一致
真正容易被忽略的是：当表单有多个条件分支（比如根据角色开关字段），仅靠 HTML 属性初始化不够，必须确保 JS 切换时用 .readOnly 而非属性操作，并在表单提交前验证值是否如预期被包含。
