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

如果你在使用Bootstrap模态框（Modal）时，可能会注意到一个细节：当模态框关闭后，键盘上的焦点并未自动回到最初触发打开它的按钮上。这并非小问题，它直接违反了WCAG（Web内容可访问性指南）的要求，对依赖键盘操作的用户而言，体验会非常割裂。

为什么关闭后焦点未回归原按钮？

根本原因在于，Bootstrap模态框本身并未“记住”是谁打开了它。无论通过 data-dismiss="modal" 属性关闭，还是使用 .modal('hide') 方法关闭，框架都没有保存或恢复焦点上下文的逻辑。

• 点击按钮打开模态框时，焦点确实会转移到模态框内第一个可聚焦元素（如关闭按钮或输入框），但原始按钮的引用并未被缓存。
• 模态框关闭后，Bootstrap 3 的默认行为是将焦点返回 document.body，而 Bootstrap 4/5 则未进行显式焦点管理，导致焦点行为因浏览器而异。
• 更糟糕的是，如果触发元素是一个未正确处理点击事件的 标签，还可能意外触发页面跳转，使焦点位置彻底丢失。

手动保存并恢复触发按钮焦点

既然框架未提供此功能，就需要自行实现。核心思路很简单：在模态框打开前，将触发元素“保存”起来；待模态框完全关闭后，再主动将焦点“归还”。关键在于确保该元素在归还焦点时仍存在于DOM中且处于可聚焦状态（未被隐藏或禁用）。

• 监听 show.bs.modal 事件，通过事件对象的 e.relatedTarget 属性获取触发按钮（这通常适用于 data-toggle 触发方式）。
• 将此触发元素作为数据属性存储到模态框实例上：$(e.target).data('trigger', e.relatedTarget)。
• 在 hidden.bs.modal 事件中取回该元素并调用 .focus() 方法：$(e.target).data('trigger').focus()。
• 如果通过JavaScript主动调用 .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。

• 触发元素是 ：点击后URL的hash变化可能干扰事件捕获。稳妥的做法是改用 href="javascript:void(0)" 或在事件处理中调用 event.preventDefault()。
• 模态框被JavaScript多次初始化：如果重复调用 .modal()，可能导致旧的事件监听器残留，此时 e.relatedTarget 指向的可能是一个已销毁的DOM节点。
• 触发按钮是动态插入的（如Vue/React渲染生成）：需要确保事件委托绑定在稳定的父级容器上，或在元素插入后立即绑定监听器。
• 当模态框设置为 backdrop: 'static' 或禁用键盘关闭时，用户只能通过按钮关闭模态框——此时焦点能否正确返回，直接决定键盘用户是否会被“困住”。

移动端与 Safari 的额外注意事项

在iOS Safari和部分Android浏览器上，情况会更复杂。这些浏览器对 focus() 方法的调用有严格限制：若非由用户手势直接触发，调用会被静默忽略。这意味着在 hidden.bs.modal 事件中直接调用 .focus() 可能失效。

• 一种常见解决方案是将 .focus() 调用包裹在 setTimeout(..., 0) 中，使其进入下一个JavaScript任务队列，这通常能满足浏览器对“用户交互后”执行时机的要求。
• 更稳妥的做法是结合 click 或 touchend 事件进行二次确认。例如，监听关闭按钮的点击事件，在那一刻缓存触发源，并稍作延时再归还焦点。
• 务必避免对处于 disabled 或 visibility: hidden 状态的按钮调用 focus()，此类调用会静默失败。

说到底，真正的难点并不在于写出那几行缓存和恢复焦点的代码，而在于如何准确判断“此时此刻，这个按钮是否还值得被聚焦”——它是否仍然可见、可用、未被移除，并且位于当前视口之内。自动化方案很难做到100%可靠，很多时候还需要准备一些人工兜底的逻辑。