readonly 是最常用且可靠的方式，它阻止用户编辑但允许表单提交值；disabled 会使字段值不提交，后端收不到，二者不可混用。
怎么让 <input> 真正不可编辑
只加 readonly 属性是最常用也最可靠的方式，它既阻止用户输入，又允许表单提交该字段值。别用 disabled——它会让字段值被忽略，后端收不到。
常见错误是混用 readonly 和 disabled，或者只靠 CSS（比如 pointer-events: none）伪装只读——这完全无效，键盘仍可聚焦并输入。
-
<input type="text" value="固定内容" readonly>是标准写法 - JavaScript 动态设置：用
element.readOnly = true（注意是readOnly，不是readonly） - 若同时设
readonly和tabindex="-1"，可避免键盘意外聚焦
readonly 和 disabled 在表单提交时的区别
这是最容易踩坑的地方：一个发得出去，一个发不出去。
假设你有 <form><input name="username" value="admin" readonly></form>，提交后后端会收到 username=admin；换成 disabled，这个字段压根不会出现在请求数据里。
立即学习“前端免费学习笔记（深入）”；
- 需要展示+传递值 → 用
readonly - 纯展示、不参与逻辑 → 可用
disabled，但要确认后端是否依赖该字段 - 用 JS 清空或重设值时，
readonly元素仍可被脚本修改，disabled元素也能改，只是不能交互
只读文本框的样式和用户体验细节
浏览器默认会给 readonly 输入框加浅灰色背景或虚线边框，但不同浏览器表现不一致，容易让用户困惑“是不是坏了”。得手动统一视觉反馈。
- 加 CSS：
input[readonly] { background-color: #f5f5f5; cursor: not-allowed; } - 避免用
opacity: 0.7——会降低可访问性，屏幕阅读器可能跳过 - 如果内容较长，记得加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;防止撑破容器
什么时候不该用 <input readonly>？
纯展示场景下，<input> 其实是错的选择。语义不对，还多出光标、聚焦、键盘事件等干扰。
- 只读文本且无需复制 → 用
<span>或<p>更轻量 - 需要用户复制内容 → 加
<div contenteditable="false">或配合user-select: all的<span> - 表单中某字段由前序选择决定、后续不可改 → 仍用
readonly，但务必在 JS 中同步禁用关联操作（比如禁止切换下拉框）
真正麻烦的不是写一行 readonly，而是没想清楚它在整个表单流程里的角色——值要不要传、用户要不要感知、后续逻辑要不要锁死。
