使用 readonly 属性可实现内容展示但不可编辑，它允许聚焦、复制和表单提交，语义清晰且原生支持；正确写法为直接写 readonly（不带等号或值），不可与 disabled 混用。
直接加 readonly 属性就能实现展示但不可编辑，这是最标准、最可靠的方式。它不阻止聚焦、复制和表单提交，语义清晰，浏览器原生支持。
HTML 中正确写法
在 <input> 或 <textarea></textarea> 标签里直接写 readonly（布尔属性，不带等号、不赋值）：
- ✅ 正确：
<input type="text" value="订单号ABC123" readonly> - ✅ 正确：
<textarea readonly>系统自动生成说明</textarea> - ❌ 错误：
readonly="true"或readonly="false"——前者冗余，后者反而启用只读（只要属性存在就生效）
别和 disabled 搞混
两者视觉相似，但行为完全不同：
- readonly：内容可见可复制，能获得焦点，值会随表单一起提交到后端
- disabled：完全脱离表单交互流，无法聚焦、不能复制，值不会提交，后端收不到
如果你需要用户看到内容、又希望后端能拿到这个值（比如预填的邮箱、订单号、时间戳），必须用 readonly。
让只读状态更直观
浏览器默认对 readonly 输入框几乎不做样式区分，容易让用户误点或困惑。建议加简单 CSS：
- 设置背景色：
input[readonly] { background-color: #f5f5f5; } - 改光标样式：
cursor: default;或cursor: not-allowed; - 避免用
opacity或纯颜色区分，兼顾色觉障碍用户 - 可加
title="系统生成，不可修改"或旁注文字辅助理解
JavaScript 动态控制要点
需要用 JS 切换只读状态时，注意大小写和操作方式：
- ✅ 正确：
el.readOnly = true;或el.readOnly = false;（注意是 readOnly，驼峰写法） - ❌ 避免：
el.setAttribute('readonly', 'readonly')—— 在部分旧浏览器中不稳定 - 如果同时设了
disabled，它会覆盖readonly，优先级更高
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
