应根据是否提交值选择 readonly 或 disabled：需提交时用 readonly，保留聚焦、复制和表单提交；不需提交时用 disabled，禁用交互且不参与提交；JavaScript 控制需注意兼容性，后端必须校验。
要限制用户修改输入框数据，关键不是“禁用”本身，而是选对语义：用 readonly 还是 disabled，取决于这个值要不要传给后端。
需要提交值？必须用 readonly
比如订单号、用户 ID、预填的身份证号——这些字段显示出来供用户核对，但不能改，且后端必须收到原始值。这时加 readonly 属性即可：
- 写法简单：
<input type="text" value="U-20260904" name="order_id" readonly> - 它仍可聚焦、可复制、可 Tab 切入，只是不能键盘输入或删除
- 表单提交时，
order_id=U-20260904会正常出现在 FormData 或 query string 中 - 只对
<input type="text"/>、password、email等文本类类型和<textarea>有效
不需要提交值？才用 disabled
如果字段只是临时占位、纯 UI 层屏蔽（比如“提交中”时锁住整个表单），或者该值本就不参与业务逻辑，才用 disabled：
- 写法：
<input type="text" value="暂不可用" disabled>，属性存在即生效，不需赋值 - 元素变灰、无法聚焦、无法触发任何交互（包括 onclick）
- 它的
name和value完全不会出现在表单提交数据里 - 支持更广：可用于
<select>、<button>、<fieldset>等
JavaScript 动态控制要避开常见坑
运行时切换状态时，别被浏览器兼容性绊倒：
立即学习“前端免费学习笔记（深入）”；
- 设为只读：
el.setAttribute('readonly', '')或el.readOnly = true（推荐前者） - 恢复可编辑：
el.removeAttribute('readonly')—— 不要用el.readOnly = false，Safari 15 及更早版本不认 - 用
disabled时，直接赋布尔值：el.disabled = true/el.disabled = false - 加了
readonly后记得检查tabindex，否则 Tab 进去光标不动，体验断裂
前端限制 ≠ 数据安全
readonly 和 disabled 都只是前端交互层控制：
- 用户删掉属性、用控制台执行
input.value = "新内容"、右键粘贴，都能绕过 - 后端必须校验：比对数据库原始值、检查签名或时间戳，确认该字段未被非法篡改
- 如果业务真要求“不可变”，考虑用隐藏域存原始值 + 前端展示区分离，再配合服务端强校验
