Bootstrap按钮加载状态禁用并显示旋转图标的方法

禁用按钮时，务必使用 button.disabled = true 才是真正有效的做法。其他方式要么只改变外观不改变交互行为，要么仅防止鼠标点击却忽略键盘操作。即便按钮显示为灰色，用户仍能连续点击、通过 Tab 键聚焦并按回车触发提交，用户体验会严重受损。唯一可靠的方案就是直接操作按钮的原生属性。浏览器会自动为按钮应用相应样式，从而使语义、视觉与行为保持一致。

必须用 button.disabled = true，不是加 disabled 类

Bootstrap 5 不再响应 class="disabled" 来真正禁用按钮——它只改变视觉样式，不会阻止点击、键盘交互（空格/回车），也不会影响表单序列化。你看到的按钮变灰了，但用户仍能连续点击、通过 Tab 键聚焦并按回车提交。唯一稳妥的办法是直接操作原生属性：button.disabled = true 或 button.setAttribute('disabled', '')。浏览器会自动触发 button:disabled 样式规则（包含 opacity: .65 和 pointer-events: none），这样语义、外观与交互才能统一。

旋转图标要用 spinner-border 插入 DOM，别靠伪元素或 CSS 动画

通过伪元素旋转（如 ::after { animation: spin }）容易导致文字偏移、按钮宽度变化，尤其在小尺寸按钮上更为明显；纯 CSS 动画也难以精确控制尺寸和居中。Bootstrap 5 内置的 spinner-border 组件更加可靠：

• 插入前先清空按钮内容：button.innerHTML = ''
• 创建并插入：const spinner = document.createElement('span');，设置 className = 'spinner-border spinner-border-sm'，添加 role="status" 和 aria-hidden="true"
• 再追加文字：button.insertAdjacentText('beforeend', '提交中')
• 这样可以避免多次点击后 DOM 嵌套溢出（例如 ...）

状态恢复必须写在 finally 块里，且要成套还原

只在 .then() 中恢复状态，接口返回 400/500 时就会卡住；只在 .catch() 中恢复，成功状态反而被遗漏。正确的做法是在请求链末尾统一清理：

• .finally(() => { button.removeAttribute('disabled'); button.textContent = originalText; })
• 不要用 button.disabled = false——某些旧浏览器不会触发样式重绘
• 若使用了 AbortController，finally 块中也要调用 abortController.abort()
• 同步清除 aria-disabled 和 tabIndex：禁用时设置 aria-disabled="true" 和 tabIndex = -1，还原时移除并恢复 tabIndex = 0

移动端和读屏器需要额外加固

部分安卓 WebView 和老版 Safari 对 disabled 的 pointer-events 拦截不够彻底，手指轻点可能穿透到下层元素；NVDA + Firefox 等屏幕阅读器有时不会播报单纯的 disabled 状态。因此还需要补充两处代码：

• 禁用时：button.setAttribute('aria-disabled', 'true')、button.tabIndex = -1、button.style.pointerEvents = 'none'
• 还原时：button.removeAttribute('aria-disabled')、button.tabIndex = 0、button.style.pointerEvents = ''
• 若仍有点击穿透问题，临时添加 button.style.position = 'relative' 防止层叠错乱

最容易忽略的一点是：原始文字必须提前缓存（例如存入 dataset.originalText），否则还原时图标或空格会被清空；另外按钮类型应设为 type="button"，否则在表单内会默认触发提交，导致逻辑重复执行两次。