只读输入框用 readonly 属性即可生效，直接在 标签中写 readonly（布尔属性，无需赋值），如 ；它支持表单提交、可聚焦，但需手动优化样式与可访问性。
只读输入框用 readonly 属性就行，但别和 disabled 搞混——它会发数据、能聚焦、样式也得手动调。
怎么加 readonly 属性才生效
直接在 <input> 标签里写 readonly（布尔属性，不用赋值）：
<input type="text" value="不可编辑" readonly>
注意：readonly 是原生 HTML 属性，所有现代浏览器都支持，不需要 JS 或 CSS 配合就能阻止编辑。但以下情况它不生效：
-
type="hidden"上加readonly没意义（本来就不能输） -
contenteditable="true"的元素不认这个属性 - 用了框架（如 React）时，得用
readOnly（驼峰，且必须显式设为true）
readonly 和 disabled 的关键区别
两者都禁编辑，但行为完全不同：
-
readonly：表单提交时，值仍会发给后端；元素可获得焦点（tabindex有效）；默认样式是“灰但有光标” -
disabled：值不会提交；无法聚焦；默认变灰+变淡，还可能被屏幕阅读器跳过 - 如果只是想锁住内容但保留交互（比如点开日历选日期），必须用
readonly+ 额外 JS 拦截input事件
只读状态下的样式和可访问性问题
浏览器默认的 readonly 样式很弱，用户可能看不出它是只读的。建议补一点 CSS：
input[readonly] { background-color: #f5f5f5; cursor: not-allowed; }
但要注意：
- 别只靠颜色区分状态（色觉障碍用户看不到）
- 加
title或旁边放小字说明（如“系统生成，不可修改”）更稳妥 - 用
aria-readonly="true"显式声明，对读屏软件更友好
React/Vue 里容易漏掉的细节
框架会接管属性绑定，原生写法容易失效：
- React 中必须写
readOnly={true}（不是readonly），否则控制台警告且不生效 - Vue 模板里可以写
readonly，但若用v-bind动态绑定，得写成:readonly="isReadonly" - SSR 场景下，服务端渲染出的
readonly属性，客户端 hydration 后可能被框架覆盖，要检查最终 DOM 是否真存在该属性
真正麻烦的是混合场景：比如一个字段大部分时间只读，但权限变化后要可编辑——这时候别只切 readonly，还得同步处理 tabindex、onFocus 和键盘事件拦截，不然会有聚焦却不能输的诡异体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
