input标签的readonly和disabled有什么区别？HTML表单禁用状态解析

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《input标签的readonly和disabled有什么区别？HTML表单禁用状态解析》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

readonly和disabled语义、行为、适用范围完全不同：disabled彻底禁用交互且不提交值，readonly仅禁止编辑但允许聚焦、复制和提交。

readonly 和 disabled 不是“差不多”，而是语义、行为、适用范围全都不一样；选错会导致值没提交、交互没拦截、可访问性出问题，甚至被用户绕过。

disabled 会让表单元素彻底退出交互流程

加了 disabled 的 <input>、<select>、 等，会同时发生三件事：不能聚焦（Tab 键跳过）、不响应任何鼠标/键盘事件、提交时 完全不包含该字段的值（FormData、form.serialize()、原生 submit 都跳过）。

• <input type="text" value="123" disabled> → 提交后后端收不到 name=123
• <select disabled>A</select> → 用户点不开，选不了，也传不出值
• <input type="checkbox" disabled checked> → 勾选状态仍可读（el.checked 返回 true），但用户无法点击切换，提交时也不包含该字段
• 用 JS 动态控制必须写 el.disabled = true 或 el.disabled = false，别用 setAttribute('disabled', '') —— 后者在旧版 IE 下可能不重绘状态

readonly 只锁编辑，不锁其他一切

readonly 仅对 <input type="text">、<input type="password">、<input type="email"> 等文本类输入框，以及 <textarea> 有效；它允许聚焦、允许复制、允许选中、允许提交值，只是不让用户改内容。

• <input type="text" value="ID-789" readonly> → 用户能 Tab 进去、Ctrl+A 全选、Ctrl+C 复制、提交时照样带上 ID-789
• <select readonly> 或 <input type="checkbox" readonly> → 完全无效，浏览器直接忽略该属性
• 视觉上通常没变化（不会自动变灰），得靠 CSS 额外加 opacity: 0.6 或 background: #eee 才像“禁用”
• 如果字段本应不可改但又必须提交（比如预填的用户 ID），就该用 readonly；若连查看和复制都不允许，就得换 disabled 或配合 display: none

fieldset 上设 disabled 是批量禁用的正确姿势

想一次性禁用一组控件（比如“企业信息”区块），别一个个加 disabled，直接用

包裹：

<fieldset disabled>
  &lt;input name=&quot;company&quot; value=&quot;ABC&quot;&gt;
  &lt;select name=&quot;industry&quot;&gt;<option>IT</option>&lt;/select&gt;
  &lt;textarea name=&quot;desc&quot;&gt;...&lt;/textarea&gt;
</fieldset>

• 内部所有支持 disabled 的子控件（input、select、textarea、button）都会被递归禁用
• 子控件即使显式写了 disabled="false" 也没用——fieldset 的禁用优先级更高
• 文本不受影响，仍可读、可聚焦，这对屏幕阅读器是友好设计，不是 bug
• 注意：
  标签本身不支持 disabled，fieldset 是最接近“禁用整个表单”的原生方案

JS 动态控制时最容易忽略的三个细节

用 JS 开关禁用状态很常见，但以下三点一漏就出问题：

• 禁用当前聚焦元素后，焦点不会自动移走，键盘操作可能卡住 —— 建议紧接着调 nextFocusableEl.focus()
• 禁用带 required 的字段时，HTML5 表单验证会跳过它，但如果之前已触发过 checkValidity()，错误提示可能残留；建议禁用后顺手调一次 el.reportValidity() 清理 UI 状态
• 在 Vue/React 中，只改 DOM 的 .disabled 属性，不更新响应式数据或 state，下次 re-render 会把你的禁用状态覆盖掉 —— 必须同步更新绑定的数据源

真正要防止用户提交脏数据，前端禁用只是体验层辅助；后端必须做字段权限校验和值合法性判断，这点不能妥协。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《input标签的readonly和disabled有什么区别？HTML表单禁用状态解析》文章吧，也可关注golang学习网公众号了解相关技术文章。