readonly对<button>完全无效，浏览器会忽略它；必须用disabled才能真正禁用按钮交互与提交。
button元素不支持readonly属性
直接说结论：readonly对<button>完全无效，浏览器会忽略它。你写<button readonly>提交</button>，按钮照样可点击、可聚焦、可触发click事件，值也照常提交（如果是表单内按钮，其name/value会进请求体）。这不是兼容性问题，而是规范限制——readonly只定义在文本类控件上，<button>不在支持列表里。
常见错误现象：<button type="submit" readonly>确认</button>上线后用户仍能反复点击，导致重复提交；或者误以为“加了readonly就安全了”，没配disabled，结果后端收到多条相同请求。
-
disabled是<button>唯一真正起效的禁用属性 - 想让按钮不可点且不参与交互，必须用
disabled，别试readonly - 如果需要“视觉禁用但保留提交能力”，那是伪需求——
disabled按钮的name/value本来就不会进表单，不存在“保留提交”的可能
disabled button的值不会出现在表单提交中
<button type="submit" name="action" value="confirm" disabled>确认</button>——提交时，这个action=confirm根本不会出现在FormData、form.serialize()或原生POST请求体里。浏览器在序列化表单时，会直接跳过所有disabled控件，不管它是不是<button>。
典型翻车场景：表单里有两个按钮<button name="op" value="save">保存</button>和<button name="op" value="submit" disabled>提交</button>，用户点了“保存”，后端却收不到op字段，因为disabled按钮被过滤，而save按钮没设name或type导致未被识别。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 只有
type="submit"或type="image"的<button>才会在提交时带name/value -
disabled会让它彻底退出提交流程，不是“灰掉但还传值” - 如果业务需要区分操作类型（如“草稿保存”vs“正式提交”），禁用其中一个按钮时，另一个必须确保
name和value正确设置
disabled button的交互和可访问性表现
disabled会让<button>完全退出交互流：无法focus()、Tab键跳过、鼠标悬停无:hover、点击不触发click事件监听器，屏幕阅读器会播报“已禁用”并跳过该元素。
而readonly在这里毫无意义——既不改变样式，也不影响焦点或事件，更不阻止提交。所以别给<button>加readonly，它除了增加代码噪音，什么也干不了。
- 用
disabled后，CSS中button:disabled可自定义灰度、游标等，但别依赖opacity掩盖逻辑缺陷 - JS动态控制时，写
btn.disabled = true比btn.setAttribute('disabled', '')更可靠，尤其在旧版IE或某些WebView中 - 批量禁用一组按钮？别循环设
disabled，用<fieldset disabled>包裹更语义化且健壮
为什么有人误以为button支持readonly？
混淆通常来自两处：一是把<input type="button">和<button>当成一回事——<input type="button">确实支持readonly，但它本质是输入框，不是按钮；二是看到<input type="text" readonly>有效，就推断所有表单控件都适用，忽略了HTML规范对属性支持范围的明确定义。
真正要实现“按钮只读但可复制文字”？不存在这种需求——按钮内容不是供用户复制的字段，API Key、订单号这类需复制的内容，应该放在<input type="text" readonly>或<textarea readonly>里，而不是按钮上。
-
<input type="button">虽支持readonly，但设了也没实际意义：它本就不提交值，且用户本来就不能编辑它的value（显示文本由value属性控制，非用户输入） - 若真需要按钮文字可选中，用
<div role="button">配合tabindex和JS事件，但这是反模式，应优先考虑设计合理性 - 最常被忽略的点：禁用按钮后，别忘了同步禁用其关联的表单校验逻辑，否则用户可能绕过前端校验直接提交
