Bootstrap不提供自动切换的loading按钮，需手动控制状态，否则易导致跳动、重复提交、读屏器误读等问题；正确做法是用position:absolute居中spinner、保留文字占位、三步同步禁用/插入/恢复，并在finally中确保还原。
Bootstrap 本身不提供自动切换的 loading 按钮，必须手动控制状态。直接加 spinner-border 类或只改文字，大概率导致按钮跳动、重复提交、读屏器误读，甚至移动端点击穿透。
为什么按钮加了 spinner 后文字上移、高度突变
因为 spinner-border 是行内元素，默认无定位约束，会参与按钮的流式布局计算，额外撑高容器。它不会“浮”在文字上，而是和文字并排挤占空间。
- 给按钮加
position: relative和overflow: hidden - 把
spinner-border元素用position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)居中覆盖 - 宽高用
em单位（如width: 1.5em; height: 1.5em），匹配按钮字号，避免 px 硬编码导致响应错位 - 原始文字不要
display: none，改用visibility: hidden或opacity: 0，保留占位防止按钮宽度塌缩
如何安全禁用 + 插入 spinner + 恢复原状
三步必须同步：禁用交互、隐藏原文、插入 spinner；且恢复逻辑必须进 finally，否则网络失败或 Promise reject 后按钮永远卡住。
- 用
btn.disabled = true（不是setAttribute('disabled', '')），确保键盘回车也被拦截 - 提前存原始 HTML：
btn.dataset.originalHtml = btn.innerHTML，保留图标、data-*等结构 - 加载时：
btn.disabled = true，隐藏文字节点，再appendChild(spinnerEl)（别用append()或html()拼字符串，易 XSS） - 恢复时在
fetch().finally()或try/catch/finally中执行：btn.disabled = false，移除 spinner 节点，btn.innerHTML = btn.dataset.originalHtml - 移动端额外加
btn.style.pointerEvents = 'none'，防 touch 事件穿透
button type="submit" 点击触发两次怎么办
这是表单内按钮最常见的坑：默认 type="submit" 会先执行 JS 事件，再触发表单 submit，导致异步请求发两遍。
- 显式设
type="button"，彻底切断表单提交行为 - 如果必须用
type="submit"，事件处理函数第一行加event.preventDefault() - 同时设
aria-busy="true"和aria-disabled="true"，兼顾可访问性 - 别忘了给 spinner 加
role="status"和aria-hidden="true"，否则读屏器会重复读 “loading loading”
要不要自己写 CSS 旋转动画替代 spinner-border
可以，但只在设计系统对颜色、转速、尺寸有强一致性要求时才值得。自定义动画容易翻车的点比想象中多。
- 必须写
transform-origin: center，否则旋转中心偏移，视觉抖动 - 动画用
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }，别加rotateZ()（Safari 兼容风险） - 别用
scale()缩放 spinner 元素——高清屏下边框会模糊 - 颜色继承用
currentColor，适配深色主题；border-right-color: transparent是环形旋转的关键 - 动画时长建议 1s–1.2s，太慢用户焦虑，太快识别不清
finally 块里，就随时可能留下一个永远 disabled 的按钮。
