HTML中input标签readonly和disabled区别详解-html教程-PHP中文网

后端收不到字段？八成是误用disabled而非readonly——disabled会完全过滤字段值，不参与表单序列化；readonly则值正常提交，且支持聚焦、复制。

html中input标签readonly和disabled区别详解

后端收不到字段？八成是把 readonly 写成了 disabled——这不是样式问题，是值进不进请求体的根本分水岭。

表单提交时字段值会不会发到后端

这是唯一不可妥协的判断依据。浏览器序列化表单（form.submit()、new FormData(form)、jQuery.serialize()）时，对两个属性的处理逻辑完全不同：

disabled 元素：被完全过滤，name 和 value 都不会出现在请求数据中，哪怕你用 JS 改了 value 也无效
readonly 元素：值正常参与序列化，后端可通过 request.getParameter("id") 或等价方式取到

典型翻车现场：<input name="user_id" value="789" disabled> 提交后，后端日志查不到 user_id，接口报“缺少必传参数”。

所以直接问自己：这个字段用户要看到、要复制、后端还必须收到？→ 用 readonly。只是临时锁死、且不希望它进请求？→ 用 disabled。

哪些元素支持 readonly，哪些只认 disabled

readonly 不是万能锁，它只对特定元素生效；disabled 才是通用禁用开关。

有效：<input type="text">、<input type="password">、<input type="email">、<textarea></textarea>
无效（浏览器直接忽略）：<select readonly></select>、<input type="checkbox" readonly>、<button readonly></button>

想实现“只读下拉框”？别写 readonly，要么换成 <input type="text" readonly> 模拟，要么 JS 禁用每个 <option disabled></option>，或者纯文本展示。

<fieldset disabled></fieldset> 能递归禁用内部所有子控件，比逐个加 disabled 更健壮，也更利于语义表达。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

用户能不能聚焦、选中、复制内容

这直接影响功能可用性，不是“锦上添花”，而是刚需。

readonly 允许：Tab 切入、鼠标点击聚焦、.focus()、双击选中、Ctrl+A、Ctrl+C；也支持监听 focus 事件
disabled 彻底阻断：Tab 跳过、.focus() 静默失败、无法选中或复制；:focus 伪类不触发，outline 也不显示

展示 API Key、调试 ID、金额等需复制的字段，必须用 readonly；用 disabled 用户点不动、选不了、也复制不了。

注意：readonly 默认不灰化，建议手动加 CSS：input[readonly] { background: #f5f5f5; cursor: not-allowed; }

JavaScript 动态控制时怎么写才安全

脚本切换状态比静态 HTML 更容易翻车，尤其跨浏览器兼容性。

设 disabled：直接写 el.disabled = true 或 el.disabled = false，安全可靠
设 readonly：避免 el.readOnly = false（某些旧版 Safari 不响应），稳妥做法是 el.removeAttribute('readonly') 启用，el.setAttribute('readonly', '') 禁用

同时设置 readonly 和 disabled 会发生什么？disabled 优先级更高——它会立即接管控制权，表现为变灰 + 不可聚焦 + 值不提交。此时 readonly 形同虚设。这种写法常见于旧项目或 JS 动态切换逻辑出错时，容易误以为“双重保险”，实际是冗余且可能掩盖问题。

真正难调试的，是那些“看起来能提交、实际被过滤掉”的字段——它们往往藏在复杂表单深处，且只在特定流程分支里被设为 disabled，测试时容易漏掉提交验证环节。