Bootstrap模态框关闭后默认不自动恢复焦点至触发按钮，因其未记录触发源且关闭时仅聚焦body或无操作；需手动在show.bs.modal中缓存e.relatedTarget，并在hidden.bs.modal中延时focus回原按钮。
默认情况下，bootstrap 模态框关闭后**不会自动将焦点返回到触发它的按钮**，而是丢给 document.body 或上一个可聚焦元素（行为因浏览器和 bootstrap 版本略有差异）。这违反 wcag 可访问性要求，也影响键盘用户操作流。
为什么关闭后焦点没回原按钮？
Bootstrap 本身不记录触发源，data-dismiss="modal" 和 .modal('hide') 都不保存或恢复焦点上下文。原按钮可能已失焦、被销毁，或 DOM 重排导致其失去“可恢复焦点”状态。
- 点击按钮打开模态框时，焦点会移到模态框第一个可聚焦元素（如
.close或input），但原始按钮引用未被缓存 - 模态框关闭后，Bootstrap 仅执行
focus()到document.body（Bootstrap 3）或不做显式焦点管理（Bootstrap 4/5） - 若用
a标签作触发器且未加href="javascript:;"或preventDefault()，还会触发页面跳转，彻底丢失焦点位置
手动保存并恢复触发按钮焦点
必须在打开前缓存触发元素，并在 hidden.bs.modal 事件中主动 .focus() 回去。注意：要确保该元素仍存在于 DOM 且可聚焦（例如没被 display: none 或 disabled）。
- 监听
show.bs.modal事件，在里面用e.relatedTarget获取触发按钮（仅适用于 data-toggle 触发方式） - 把触发元素存为模态框实例的 data 属性：
$(e.target).data('trigger', e.relatedTarget) - 在
hidden.bs.modal中取回并 focus：$(e.target).data('trigger')?.focus() - 如果用 JS 主动调用
.modal('show')，需手动传入触发源，例如：$('#myModal').data('trigger', $btn).modal('show')
$('#myModal').on('show.bs.modal', function (e) {
$(this).data('trigger', e.relatedTarget);
}).on('hidden.bs.modal', function (e) {
const trigger = $(this).data('trigger');
if (trigger && trigger.length) trigger[0].focus();
});
data-toggle 触发时的常见陷阱
看似最简单的 data-toggle="modal" 方式，反而最容易踩坑——因为 e.relatedTarget 在某些场景下为 null。
- 触发元素是
<a href="#">：点击后 URL hash 变化，可能干扰事件捕获；应改用href="javascript:void(0)"或event.preventDefault() - 模态框通过 JS 多次初始化（如重复调用
.modal()）：旧事件监听器残留，e.relatedTarget可能指向已销毁节点 - 触发按钮是动态插入的（如 Vue/React 渲染后）：需确保事件委托绑定在父容器，或在插入后立即初始化监听
- 使用
backdrop: 'static'或禁用 keyboard 后，用户只能靠按钮关闭——此时焦点返回更关键，否则键盘用户卡死
移动端与 Safari 的额外注意点
iOS Safari 和部分 Android 浏览器对 focus() 有严格限制：非用户手势直接触发的 focus 调用会被忽略。这意味着在 hidden.bs.modal 里直接 .focus() 可能无效。
- 解决方案：包裹在
setTimeout(..., 0)中，让其进入下一个任务队列，满足“用户交互后”的时机要求 - 更稳妥做法：结合
click或touchend事件做二次确认，例如监听关闭按钮的点击，立刻缓存并延时 focus - 避免对
disabled或visibility: hidden的按钮调用focus()，会静默失败
真正难的不是写几行代码，而是判断「此刻这个按钮是否还值得被 focus」——它是否可见、可用、未被移除、且处于当前视口内。自动化做不到 100%，得留一手人工兜底逻辑。
