应使用readonly而非disabled当且仅当需保留字段值参与表单提交且允许聚焦、复制、tab切换；它仅对text类input和textarea生效，对checkbox、select等无效；后端必须校验防篡改。
用 readonly 属性是最直接、最符合语义的方案，但前提是你要确认：这个值必须随表单提交，且允许用户复制、聚焦、Tab 切入。
什么时候该用 readonly 而不是 disabled
关键看后端要不要这个字段的值：
- 如果是订单号、用户 ID、预填的身份证号——必须用 readonly，否则后端收不到
- 如果是临时占位、纯 UI 层屏蔽（比如“提交中”时锁住整个表单块）——才用 disabled
- disabled 的字段不会出现在 new FormData(form) 里，也不会被 serializeArray() 收集，这点常被忽略
readonly 只对哪些元素和类型生效
它不是万能开关，只作用于：
- <input> 中的文本类：type="text"、"password"、"email"、"tel"、"url"、"search"、"date" 等
- <textarea></textarea>
- 对 type="checkbox"、type="radio"、<select></select>、<button></button> 加 readonly 完全无效，浏览器直接忽略
- <input type="hidden"> 加了也没意义，它本就不该被编辑
动态控制 readonly 的 JS 写法避坑点
别信 el.readOnly = false 能可靠解除只读——Safari 15 及更早版本不认这个赋值：
- 设为只读：用 el.setAttribute('readonly', '') 或 el.readOnly = true（前者更稳）
- 解除只读：必须用 el.removeAttribute('readonly')，而不是 el.readOnly = false
- React/Vue 中注意拼写：是 readOnly（大驼峰），不是 readonly；Vue 绑定 :readonly="isLocked" 是错的
- 设了 readonly 后没处理 tabindex，会导致 Tab 键能聚焦进去但光标不动，体验断裂
真正要防篡改，readonly 只是前端体验层的一道门；用户删掉属性、用控制台改 value、粘贴覆盖，浏览器照发。后端校验才是不可绕过的那道墙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
