如何准确获取容器内第一个可聚焦元素-html教程-PHP中文网

如何准确获取容器内第一个可聚焦元素

本文提供一个健壮、符合 Web 标准的 JavaScript 方案，用于在任意 DOM 容器中精准定位首个真正可聚焦（focusable）且实际可用的元素，全面处理禁用、隐藏、tabindex="-1"、inert 等常见边界情况。

本文提供一个健壮、符合 web 标准的 javascript 方案，用于在任意 dom 宅器中精准定位首个真正可聚焦（focusable）且实际可用的元素，全面处理禁用、隐藏、`tabindex="-1"`、`inert` 等常见边界情况。

在构建可访问性（a11y）友好的交互组件（如模态框、下拉菜单、表单导航）时，常需程序化地定位容器内“第一个可聚焦元素”——但该需求远非简单调用 querySelector('input, button, ...') 可靠解决。真实场景中，必须排除以下无效候选：

被 disabled 属性禁用的表单控件（如 <button disabled></button>）；
CSS 隐藏元素（display: none、visibility: hidden、opacity: 0 不影响聚焦能力，但 display: none 会彻底移出聚焦流）；
任何祖先节点设置了 inert 属性（现代浏览器原生支持，会阻断所有交互与聚焦）；
元素自身或任一父级设置了 tabindex="-1" 且无显式 focus() 调用（tabindex="-1" 本身允许脚本聚焦，但不参与自然 tab 顺序；关键在于：它不导致不可聚焦，而 inert 或 disabled 才是硬性阻断）；
不可见但未被 display: none 掩盖的元素（如 position: absolute; left: -9999px），仍可能合法聚焦——因此仅检测 offsetParent === null 或 getComputedStyle().display === 'none' 是必要但不充分的。

✅ 正确解法：使用 document.elementsFromPoint() 的替代思路 + 严格可聚焦性校验，而非暴力遍历。现代推荐方案如下：

function getFirstFocusableElement(container) {
  if (!(container instanceof Element)) return null;

  // Step 1: 获取所有潜在可聚焦选择器匹配的后代元素（广度优先）
  const candidates = Array.from(
    container.querySelectorAll(
      'input:not([disabled]), select:not([disabled]), textarea:not([disabled]), ' +
      'button:not([disabled]), a[href]:not([disabled]), area[href]:not([disabled]), ' +
      'iframe, object, embed, [contenteditable="true"]:not([disabled]), ' +
      '[tabindex]:not([tabindex="-1"]):not([disabled])'
    )
  );

  // Step 2: 过滤掉被 inert 阻断的元素（检查自身及所有祖先）
  const isInert = (el) => {
    while (el && el !== container) {
      if (el.hasAttribute('inert')) return true;
      el = el.parentElement;
    }
    return false;
  };

  // Step 3: 过滤掉 display:none 或无渲染盒的元素
  const isVisible = (el) => {
    const style = getComputedStyle(el);
    if (style.display === 'none') return false;
    if (style.visibility === 'hidden') return false;
    if (el.offsetWidth === 0 && el.offsetHeight === 0 && el.getClientRects().length === 0) return false;
    return true;
  };

  // Step 4: 按 DOM 顺序排序（querySelectorAll 本就是文档顺序），取首个通过全部校验者
  return candidates.find(el => 
    isVisible(el) && !isInert(el) && 
    el.offsetParent !== null && // 更强的可见性兜底
    el.matches(':enabled') // 自动涵盖 :disabled 伪类（对 button/input 等有效）
  ) || null;
}

// 使用示例：
const container = document.querySelector('.my-modal');
const firstFocusable = getFirstFocusableElement(container);
if (firstFocusable) firstFocusable.focus();

⚠️ 注意事项：

inert 属性目前在 Chrome/Firefox/Edge 111+ 原生支持，旧浏览器需 polyfill（如 wicg-inert）；
contenteditable="true" 元素需显式加入选择器，因其无默认 tabindex 但仍可聚焦；
避免依赖 tabIndex >= 0 判断：tabIndex = -1 的元素仍可被脚本聚焦（如 el.focus()），不应排除——真正应排除的是 disabled 和 inert；
不要使用 elementFromPoint() 模拟点击检测：它受 pointer-events: none 干扰，且无法反映键盘聚焦流逻辑。