禁用输入框需区分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 控制



















