Bootstrap模态框Modal关闭后焦点返回原按钮

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%，得留一手人工兜底逻辑。