应根据是否需提交值选择 readonly 或 disabled：需提交用 readonly，用户可聚焦复制但不可编辑，值正常提交；无需提交用 disabled，元素禁用且值不提交。
要限制用户修改 HTML 输入框的内容，核心是选对属性：用 readonly 还是 disabled，取决于你是否需要这个值提交到后端。
需要提交值？用 readonly
当字段内容固定但必须随表单一起发送（比如订单号、预填的手机号、身份证号），就该加 readonly 属性：
- 写法简单：
<input type="text" value="123456789" readonly>，不用赋值，存在即生效 - 用户仍可聚焦、选中、复制文字，只是不能键盘输入或粘贴覆盖
- 表单提交时，它的值会正常进入
FormData或序列化结果 - 只对
<input type="text">、password、email、date等文本类输入框和<textarea>有效
不需要提交值？用 disabled
如果字段只是临时屏蔽、纯 UI 层控制（比如“提交中”禁用整个表单块），就用 disabled：
- 写法同样简洁：
<input type="text" value="暂不可用" disabled> - 元素变灰、无法聚焦、不能复制、不响应任何交互（包括 Tab 切换）
- 关键点：它的值不会出现在表单数据里，后端收不到
- 支持范围更广：可用于
input（含 checkbox/radio）、select、button、fieldset等
JavaScript 动态控制要避开常见坑
用 JS 切换状态时，写法直接影响兼容性：
立即学习“前端免费学习笔记（深入）”；
- 设为只读：
el.setAttribute('readonly', '')或el.readOnly = true（注意是readOnly，大驼峰） - 解除只读：
el.removeAttribute('readonly')，不是el.readOnly = false（Safari 旧版不认） - 控制禁用：
el.disabled = true或el.disabled = false，这是最稳的现代写法 - 别用
setAttribute('disabled', 'disabled')或删属性来启停，容易在某些浏览器出问题
前端限制 ≠ 数据安全
无论 readonly 还是 disabled，都只是浏览器层面的交互约束：
- 用户能通过开发者工具删掉属性、直接改
value、用 JS 覆盖内容 - 所有关键字段，后端必须重新校验合法性，不能信任前端传来的任何值
- 如果业务真要求“不可变”，需配合隐藏域存原始值 + 后端比对，或服务端生成只读字段
