实现HTML表单只读状态的方法_利用readonly与disabled属性区别-html教程-PHP中文网

后端收不到字段多因误用disabled而非readonly；disabled元素提交时被完全过滤，readonly值照常提交；只读且需后端接收用readonly，临时锁死且不提交用disabled。

实现html表单只读状态的方法_利用readonly与disabled属性区别

后端收不到字段，八成是把 readonly 写成了 disabled；两者提交行为截然不同，不是“差不多”，而是“差很多”。

浏览器在序列化表单（new FormData(form)、form.serialize()、原生 submit）时，对两个属性的处理完全不同：

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

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

readonly 不是万能锁，它只对特定元素生效，硬加在不支持的标签上等于没写：

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

替代方案：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

<select></select> 只读需求：改用 <input type="text" readonly> 模拟，或 JS 禁用所有 <option disabled></option>
checkbox/radio 需视觉只读但保留值：用 disabled + 同名 <input type="hidden"> 补值

脚本切换状态比静态写 HTML 更容易出问题，尤其跨浏览器兼容性：

设 disabled：安全写法是 el.disabled = true 或 el.disabled = false；避免用 setAttribute('disabled', '')，移除时需额外 removeAttribute
设 readonly：老版 Safari 对 el.readOnly = false 响应迟钝；稳妥做法是禁用时 el.setAttribute('readonly', '')，启用时 el.removeAttribute('readonly')
别同时写 readonly 和 disabled：后者优先级更高，前者被覆盖，逻辑反而更难排查

另外，用 getAttribute("readonly") 判断状态不可靠（返回 null 或字符串），应始终用 el.readOnly（注意大小写）布尔属性。

默认样式上，disabled 元素会变灰、cursor: not-allowed；而 readonly **外观和普通输入框一模一样**，用户可能误以为能编辑。

所以实际项目中，readonly 几乎总要配 CSS：

input[readonly] {
  background-color: #f5f5f5;
  cursor: default;
}

可访问性方面：readonly 元素仍可被屏幕阅读器聚焦、播报、选中、复制；disabled 元素会被跳过，播报为“已禁用”。如果你的字段需要视障用户感知并复制（比如 API Key），readonly 是唯一选择。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！

实现HTML表单只读状态的方法_利用readonly与disabled属性区别