readonly输入框提交时有值，disabled则无；前者仅禁输入但允许聚焦复制，后者完全禁用控件且不参与表单提交。
HTML 表单里想让用户看到但不能改，用 readonly；想连聚焦、复制都不让，用 disabled——别混着用，否则表单提交时值丢了或交互反直觉。
为什么 readonly 的输入框提交时有值，disabled 就没有
浏览器规范明确：带 disabled 属性的表单控件，其 name 和 value 不会随表单一起提交；而 readonly 只禁输入，不阻断提交流程。常见错误是图省事给 input 加了 disabled，结果后端收不到这个字段。
-
readonly适合“展示+需提交”的场景，比如订单号、预填邮箱、系统生成的时间戳 -
disabled适合“临时不可用”或“纯展示无业务意义”的字段，比如灰掉的计算结果、权限不足时隐藏的配置项 - 两者都能阻止键盘输入，但
disabled还会禁用鼠标选择、焦点进入、右键菜单（复制失效）
readonly 在不同表单元素上的行为差异
不是所有标签都支持 readonly —— 它只对可编辑的表单控件有效，比如 input、textarea、select（部分浏览器支持，但不推荐依赖），而 button、output、label 不认这个属性。
-
<input type="text" readonly>✅ 标准支持 -
<textarea readonly></textarea>✅ 支持，且保留换行和滚动 -
<select readonly></select>⚠️ Chrome/Firefox 会忽略，Safari 行为不一致，别这么写 -
<input type="checkbox" readonly>❌ 无效，勾选状态仍可切换；要用disabled或 JS 拦截点击
JS 动态设置 readonly 时容易踩的坑
用 JS 控制只读状态，别直接操作 DOM 属性字符串，要用 element.readOnly = true（注意大小写：JS 是 readOnly，HTML 是 readonly）。设错就等于没设。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
el.setAttribute('readonly', 'readonly')—— 虽然 HTML 看起来有了，但某些老浏览器可能不触发行为更新 - 正确写法：
el.readOnly = true（布尔赋值，更可靠） - 如果同时用了
disabled，它优先级高于readonly，即disabled为真时，readonly不起作用 - React/Vue 中别在 JSX 或模板里写
readonly={condition}，要写成readOnly={condition}（React 对大小写敏感）
样式上怎么让 readonly 看起来更可信
默认情况下，readonly 输入框和普通输入框长得一模一样，用户可能误点、误以为能编辑。加点 CSS 区分是必要的。
- 用
:read-only伪类精准命中：input:read-only { background-color: #f9f9f9; cursor: default; } - 避免只靠颜色区分（色弱用户难识别），建议配合
cursor: default和轻微边框灰度变化 - 别用
opacity: 0.7，这会让内容变淡，影响可读性；也别禁用tabindex，否则键盘用户无法聚焦查看
最麻烦的其实是混合状态：比如一个字段在加载中要只读，加载完根据权限决定是否可编辑——这时候得同步控制 readOnly、disabled、CSS 类、甚至 tabindex，漏掉任一环，体验就断了。
