如何解决Bootstrap 3模态弹窗的键盘焦点移出问题？

你提到的这个问题确实是Bootstrap 3 Modal的一个已知短板——它原生没有实现完整的焦点陷阱（focus trap）功能，导致键盘用户在弹窗弹出后仍能通过Tab键聚焦到页面其他元素，违反了无障碍设计的要求。下面给你两个实用的解决方案：

方案一：手动实现焦点陷阱与外部元素禁用 #

这个方案不需要引入额外插件，通过原生JavaScript就能完成，步骤清晰易维护：

1. 弹窗打开时的处理

   • 保存页面中所有外部可交互元素的原始tabindex值
   • 将这些外部元素的tabindex设为-1，阻止键盘聚焦
   • 自动把焦点移到弹窗内的第一个可交互元素（比如关闭按钮）
   • 监听Tab键事件，实现弹窗内的焦点循环（Tab到最后一个元素时跳回第一个，Shift+Tab到第一个时跳到最后一个）

2. 弹窗关闭时的恢复

   • 恢复所有外部元素的原始tabindex值
   • 将焦点归还给触发弹窗的按钮

完整代码示例 #

// 获取弹窗元素和触发按钮（假设触发按钮id为"openModalBtn"）
const modal = document.getElementById('unenrollmentWarningModal');
const triggerBtn = document.getElementById('openModalBtn');
// 存储外部可交互元素的原始tabindex信息
const externalElements = [];

// 弹窗显示完成后执行
modal.addEventListener('shown.bs.modal', function() {
  // 收集所有弹窗外的可交互元素
  document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])').forEach(el => {
    if (!modal.contains(el)) {
      externalElements.push({
        el: el,
        originalTab: el.getAttribute('tabindex') || null
      });
      // 禁用外部元素的键盘聚焦
      el.setAttribute('tabindex', '-1');
    }
  });

  // 获取弹窗内的所有可交互元素
  const modalInteractiveEls = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
  const firstEl = modalInteractiveEls[0];
  const lastEl = modalInteractiveEls[modalInteractiveEls.length - 1];

  // 自动聚焦到弹窗第一个元素
  firstEl.focus();

  // 实现焦点循环逻辑
  modal.addEventListener('keydown', function(e) {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === firstEl) {
        e.preventDefault();
        lastEl.focus();
      } else if (!e.shiftKey && document.activeElement === lastEl) {
        e.preventDefault();
        firstEl.focus();
      }
    }
    // 确保ESC键关闭弹窗后焦点能正确恢复
    if (e.key === 'Escape') {
      $(modal).modal('hide');
    }
  });
});

// 弹窗关闭后恢复状态
modal.addEventListener('hidden.bs.modal', function() {
  // 恢复外部元素的原始tabindex
  externalElements.forEach(item => {
    if (item.originalTab === null) {
      item.el.removeAttribute('tabindex');
    } else {
      item.el.setAttribute('tabindex', item.originalTab);
    }
  });
  // 清空存储数组
  externalElements.length = 0;
  // 把焦点还给触发按钮
  triggerBtn.focus();
});

方案二：使用成熟的焦点陷阱插件 #

如果你不想自己写太多逻辑，可以使用专门的焦点陷阱库（比如focus-trap），它能帮你快速实现无障碍焦点管理：

简单示例 #

// 先通过npm安装focus-trap：npm install focus-trap
import focusTrap from 'focus-trap';

const modal = document.getElementById('unenrollmentWarningModal');
// 创建焦点陷阱实例
const trap = focusTrap.create(modal);

// 弹窗显示时激活陷阱
modal.addEventListener('shown.bs.modal', function() {
  trap.activate();
});

// 弹窗关闭时销毁陷阱
modal.addEventListener('hidden.bs.modal', function() {
  trap.deactivate();
});

额外注意事项 #

• 你代码里已经正确设置了aria-modal="true"和role="dialog"，这是无障碍适配的基础，继续保持
• 弹窗内的可交互元素（比如关闭按钮）已经添加了aria-label，这点做得很好，确保屏幕阅读器能正确识别

内容的提问来源于stack exchange，提问作者seal