readonly属性可实现展示不编辑，值可提交、聚焦、复制；正确写法为或，禁用disabled以免丢失数据；建议css增强视觉提示，js控制用el.readonly=true。
直接加 readonly 属性就能实现“展示但不编辑”，它既锁住输入，又保留内容可见、可聚焦、可复制，最关键的是——表单提交时值照常发送。
HTML 中正确写法
在 <input> 或 <textarea></textarea> 标签里直接写 readonly（布尔属性，不带等号、不赋值）：
- ✅ 正确：
<input type="text" value="订单号ABC123" readonly> - ✅ 正确：
<textarea readonly>系统自动生成说明</textarea> - ❌ 错误：
readonly="true"或readonly="false"——后者反而会启用只读
别和 disabled 搞混
两者表面都“不能输”，但行为完全不同：
- readonly：值能提交、可 tab 聚焦、可鼠标选中复制、键盘可触发 focus 事件
- disabled：值不会出现在提交数据里、无法聚焦、右键复制失效、视觉上通常更灰暗
如果你只是想让用户看到内容、又需要后端收到这个字段，必须用 readonly。
让只读状态看得见
浏览器默认不给 readonly 输入框加明显样式，容易被当成普通可编辑框。建议补一段 CSS：
- 用
input[readonly]或更现代的input:read-only选择器 - 设浅灰背景：
background-color: #f5f5f5 - 改光标样式：
cursor: default或cursor: not-allowed - 避免仅靠颜色区分，可加
title="系统生成，不可修改"或旁边标注小字
JavaScript 动态控制要点
如果要用 JS 切换只读状态，注意大小写和写法：
- ✅ 正确：
el.readOnly = true（JS 属性名是驼峰 readOnly） - ✅ 正确：
el.setAttribute('readonly', 'readonly')或el.removeAttribute('readonly') - ❌ 错误：
el.readonly = true（小写 readonly 在 JS 中无效） - ⚠️ 注意：若同时设了
disabled，它会覆盖readonly，优先级更高
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
