如何通过键盘导航操作将焦点移出Tabulator表格？

可以通过Tabulator的自定义按键绑定API实现该需求，完整实现方案如下：

• 第一步：定义通用工具函数，用于定位表格前后的可聚焦元素

// 可聚焦元素选择器，过滤禁用状态的元素
const FOCUSABLE_SELECTOR = 'a[href]:not([disabled]), button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';

// 获取指定元素之前的第一个可聚焦元素
function getPrevFocusable(targetEl) {
  const allFocusableEls = Array.from(document.querySelectorAll(FOCUSABLE_SELECTOR));
  const targetIndex = allFocusableEls.indexOf(targetEl);
  return targetIndex > 0 ? allFocusableEls[targetIndex - 1] : null;
}

// 获取指定元素之后的第一个可聚焦元素
function getNextFocusable(targetEl) {
  const allFocusableEls = Array.from(document.querySelectorAll(FOCUSABLE_SELECTOR));
  const targetIndex = allFocusableEls.indexOf(targetEl);
  return targetIndex < allFocusableEls.length - 1 ? allFocusableEls[targetIndex + 1] : null;
}

• 第二步：重写Tabulator默认的Tab/Shift+Tab导航逻辑，在初始化配置中添加如下内容

const yourTable = new Tabulator("#table-dom-id", {
  // 此处保留你原有的表格配置项
  keyBindings: {
    // 重写Tab键（下一个导航）逻辑
    "navNext": (e) => {
      e.preventDefault();
      const navManager = yourTable.getNavigationManager();
      const currentActiveCell = navManager.getCurrentCell();

      // 获取表格最后一个单元格
      const allRows = yourTable.getRows();
      const lastRow = allRows[allRows.length - 1];
      const lastRowCells = lastRow.getCells();
      const lastCell = lastRowCells[lastRowCells.length - 1];

      if (currentActiveCell === lastCell) {
        // 当前为最后一个单元格时，焦点跳到表格后第一个可聚焦元素
        const nextFocusEl = getNextFocusable(yourTable.getElement());
        nextFocusEl?.focus();
      } else {
        // 非最后一个单元格，走默认的单元格切换逻辑
        navManager.next();
      }
    },
    // 重写Shift+Tab键（上一个导航）逻辑
    "navPrev": (e) => {
      e.preventDefault();
      const navManager = yourTable.getNavigationManager();
      const currentActiveCell = navManager.getCurrentCell();

      // 获取表格第一个单元格
      const firstRow = yourTable.getRows()[0];
      const firstCell = firstRow.getCells()[0];

      if (currentActiveCell === firstCell) {
        // 当前为第一个单元格时，焦点跳到表格前第一个可聚焦元素
        const prevFocusEl = getPrevFocusable(yourTable.getElement());
        prevFocusEl?.focus();
      } else {
        // 非第一个单元格，走默认的单元格切换逻辑
        navManager.prev();
      }
    }
  }
})

补充说明 #

如果你的表格开启了单元格编辑功能，可以在上述逻辑中额外判断单元格编辑状态，仅在非编辑状态下执行跳出表格的逻辑，避免影响编辑态下的Tab切换体验。

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