禁用输入框需区分disabled与readonly：disabled彻底禁用且不提交数据，readonly仅禁止编辑但保留提交和交互；JavaScript应直接操作disabled布尔值，注意样式与可访问性适配。
禁用输入框的关键在于明确目的：是彻底不让用户操作，还是仅禁止编辑但需保留数据提交？选错属性会导致后端收不到值或交互异常。
直接写 disabled 属性最简单
在 <input> 标签里加上 disabled 即可，它是个布尔属性，存在就生效：
<input type="text" value="不可改" disabled>- 不用写
disabled="true"或disabled="disabled"，那样冗余且易误解 - 禁用后输入框变灰、无法聚焦、不能点击、也不能复制选中内容
- 表单提交时，这个字段的值完全不会发送到服务器
readonly 适合“显示但不许改”的场景
如果值要展示给用户看，又必须传给后端，就得用 readonly：
<input type="text" value="固定用户名" readonly>- 用户能选中、复制、聚焦，只是不能输入或修改
- 表单提交时，它的值照常包含在数据里
- 默认没有灰显样式，需要自己加 CSS（比如
background: #f5f5f5）来提示不可编辑
JavaScript 动态控制禁用状态
运行时切换状态，推荐直接操作 disabled 属性的布尔值：
立即学习“前端免费学习笔记（深入）”；
- 禁用：
inputEl.disabled = true - 启用：
inputEl.disabled = false - 检查是否禁用：
if (inputEl.disabled) { ... } - 避免用
setAttribute('disabled', 'disabled')或removeAttribute('disabled')，容易在旧 Safari 中出问题
样式和可访问性要注意
禁用状态不只是视觉变化，还影响交互与辅助技术：
- 可用
input:disabled伪类自定义样式，比如cursor: not-allowed - 屏幕阅读器会跳过 disabled 元素，所以别把关键提示文字放里面
- 移动端上，disabled 元素不响应任何 touch 事件
- 如果只是“暂时不可用”但需要保留交互反馈，考虑用
aria-disabled="true"配合 CSS 控制
