Bootstrap Modal内表格行上下键聚焦IE兼容问题求助

我之前也踩过IE11和Bootstrap模态框交互的坑，你遇到的这个聚焦失效问题，主要是IE11的焦点管理逻辑和Chrome存在差异，再加上Bootstrap模态框的焦点陷阱机制干扰导致的，给你几个针对性的解决步骤：

1. 确保表格行可被IE11聚焦 #

IE11对可聚焦元素的限制比Chrome严格，只有默认可聚焦元素（如按钮、链接）或显式设置了tabindex的元素才能获得焦点。所以先给表格行加上tabindex="0"：

<!-- 模态框内的表格行示例 -->
<tbody>
  <tr tabindex="0">
    <td>数据列1</td>
    <td>数据列2</td>
  </tr>
  <tr tabindex="0">
    <td>数据列3</td>
    <td>数据列4</td>
  </tr>
</tbody>

2. 阻止模态框拦截键盘事件 #

Bootstrap模态框在IE11中会默认处理键盘事件（作为焦点陷阱的一部分），导致你的上下键事件被拦截。修改你的keydown事件处理函数，加入事件冒泡阻止：

$(document).on('keydown', '.modal tbody', function(e) {
  // 阻止事件冒泡到模态框的默认处理逻辑
  e.stopPropagation();

  const $focusableRows = $(this).find('tr[tabindex="0"]');
  const currentFocusedIndex = $focusableRows.index($focusableRows.filter(':focus'));

  // 处理向下箭头
  if (e.key === 'ArrowDown' || e.keyCode === 40) {
    e.preventDefault();
    const nextIndex = (currentFocusedIndex + 1) % $focusableRows.length;
    $focusableRows.eq(nextIndex).focus();
  }
  // 处理向上箭头
  else if (e.key === 'ArrowUp' || e.keyCode === 38) {
    e.preventDefault();
    const prevIndex = currentFocusedIndex > 0 ? currentFocusedIndex - 1 : $focusableRows.length - 1;
    $focusableRows.eq(prevIndex).focus();
  }
});

3. 模态框打开时初始化焦点 #

IE11不会自动给非默认聚焦元素设置初始焦点，所以在模态框完全打开后，主动给第一行设置焦点：

$('#yourModalId').on('shown.bs.modal', function() {
  // 找到模态框内的第一行可聚焦表格行并设置焦点
  $(this).find('tbody tr[tabindex="0"]').first().focus();
});

验证方法 #

打开IE11的开发者工具，在模态框打开后检查第一行是否有焦点（会显示虚线边框），然后按上下键测试行的焦点切换是否正常。

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