HTML中readonly是布尔属性，只需写readonly不赋值；与disabled区别在于readonly可聚焦、复制、提交value，disabled则完全禁用；JS中应使用readOnly驼峰属性操作。
直接写 readonly 属性就行，别赋值、别加引号、别写 readonly="false" —— 否则反而生效。
HTML 里怎么写 readonly 才算对
它是个布尔属性，浏览器只看存在与否，不关心值：
- ✅ 正确：
<input type="text" value="订单号123" readonly> - ✅ 正确：
<textarea readonly>系统生成说明</textarea> - ❌ 错误：
<input readonly="true">（冗余，非标准） - ❌ 错误：
<input readonly="false">（只要写了就只读，false不起否定作用） - ❌ 错误：
<input type="checkbox" readonly>（checkbox、radio、file不支持该属性）
readonly 和 disabled 到底差在哪
选错会导致后端收不到字段、用户无法复制、Tab 键跳过异常等实际问题：
-
readonly：能聚焦、能选中、能复制、value会随表单提交（比如用户 ID、预填邮箱） -
disabled：不能聚焦、不能复制、value不参与任何序列化（FormData、form.submit()、serialize()都不包含） - 两者共存时，
disabled优先级更高，readonly被忽略 - 视觉上：
disabled默认灰阶 +cursor: not-allowed；readonly默认无变化，需手动加 CSS
JavaScript 动态控制 readOnly 的正确姿势
注意大小写：JS 属性名是 readOnly（驼峰），不是 readonly（全小写）：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
inputEl.readOnly = true或inputEl.readOnly = false - ✅ 可用：
inputEl.setAttribute('readonly', 'readonly')或inputEl.removeAttribute('readonly') - ❌ 错误：
inputEl.readonly = true（小写在部分浏览器不生效） - ❌ 错误：
inputEl.setAttribute('readonly', 'false')（依然只读） - 检查状态必须用：
if (inputEl.readOnly)，而不是hasAttribute('readonly')（可能滞后）
容易被忽略的样式、可访问性和安全边界
readonly 是纯交互层限制，不防 JS 修改，也不自带提示：
- CSS 建议补：
input:read-only { background-color: #f5f5f5; cursor: not-allowed; }，避免仅靠颜色（色觉障碍用户不可见） - 屏幕阅读器需要显式声明：
aria-readonly="true" - React 中必须写
readOnly={true}（驼峰 + 布尔值），Vue 模板中写readonly可行，但v-bind:readonly="isReadonly"更稳妥 -
readonly不等于“不可篡改”——JS 仍可改value并触发input事件，后端必须校验
真正麻烦的不是设不设得上，而是权限切换时忘了同步 tabindex、onFocus 或键盘拦截，导致能聚焦却输不了字。
