HTML中让input或textarea只读，最简单方式是添加readonly布尔属性，不带等号和值；JavaScript中应操作readOnly属性而非setAttribute；需用CSS和ARIA增强可访问性。
直接写 readonly 属性就行，别赋值
HTML 中让 <input> 或 <textarea> 变只读，最简单的方式就是在标签里加 readonly 这个布尔属性，不带等号、不写值：
✅ 正确：<input type="text" value="订单号123" readonly>
✅ 正确：<textarea readonly>系统生成说明</textarea>
❌ 错误：readonly="true" 或 readonly="false" —— 浏览器只看属性是否存在，写了就生效，值是什么无关紧要；readonly="false" 反而会让它变成只读。
readOnly 和 disabled 别混，提交行为差很远
很多人设了 readonly 却发现后端收不到值，其实是误用了 disabled。
关键区别在表单提交和交互能力：
-
readonly：内容不能输，但能 聚焦、选中、复制，且它的name和value会随表单一起提交 -
disabled：完全失活，不能聚焦、不能复制，且该字段 不会出现在 FormData 或序列化结果中 - 如果只是“展示+需提交”，比如用户 ID、预填邮箱、时间戳，必须用
readonly - 如果想彻底禁用（比如权限不足时隐藏输入框），才用
disabled
JavaScript 动态控制要用 readOnly（注意大小写）
用 JS 切换只读状态时，别调 setAttribute('readonly', ...)，兼容性差且不可靠。应该直接操作 DOM 属性：
✅ 正确：inputEl.readOnly = true 或 inputEl.readOnly = false
⚠️ 注意：readOnly 是 JS 属性名（驼峰），而 HTML 里是 readonly（全小写）
❌ 错误：inputEl.setAttribute('readonly', 'true') 或 inputEl.readonly = true（小写 readonly 在某些浏览器不生效）
检查当前状态也得用：if (inputEl.readOnly)，而不是 inputEl.hasAttribute('readonly')，因为后者可能滞后或不准。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
样式和可访问性得手动补，浏览器默认不提示
原生 readonly 没视觉反馈，用户点进去才发现不能改——体验很差。
推荐加一点 CSS 区分：
立即学习“前端免费学习笔记（深入）”；
- 用
:read-only伪类精准命中：input:read-only, textarea:read-only { background-color: #f9f9f9; cursor: default; } - 别只靠颜色（色觉障碍用户看不到），加
cursor: default或cursor: not-allowed更直观 - 对屏幕阅读器友好：显式加
aria-readonly="true" - React/Vue 中注意写法：
readOnly={true}（React 要驼峰），模板里写readonly可能被框架忽略
真正麻烦的是混合场景：比如字段初始只读，权限变化后要可编辑。这时候光切 readOnly 不够，还得同步处理 tabindex、onFocus 和键盘事件拦截，否则会出现“能聚焦却不能输”的卡顿感。
