React开发中编程设置焦点如何强制触发:focus-visible键盘导航模式

云上老周

2026-10-6

解决方案

方案1：使用`focus`方法原生参数（推荐，适配现代浏览器）

从Chrome 86、Firefox 112、Safari 15.4开始支持focus方法的focusVisible配置项，直接调用时指定该参数为true即可强制触发:focus-visible匹配，不受之前的交互方式影响：

// 方向键切换到目标搜索结果项时的处理逻辑
const navigateToResult = (targetElement) => {
  targetElement.focus({
    focusVisible: true,
    preventScroll: false // 可根据需求调整是否自动滚动元素到可视区
  })
}

方案2：自定义模拟类兼容旧浏览器

如果需要兼容更低版本浏览器，可以通过全局交互监听标记操作类型，自定义CSS类实现和:focus-visible一致的效果：

样式定义

/* 和原生:focus-visible复用样式，避免重复定义 */
:focus-visible, .custom-keyboard-focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
/* 可选：覆盖鼠标点击时的默认focus样式 */
:focus:not(:focus-visible):not(.custom-keyboard-focus) {
  outline: none;
}

交互逻辑

// 全局标记当前操作是否为键盘触发
let isKeyboardOp = false
document.addEventListener('keydown', () => isKeyboardOp = true)
document.addEventListener('mousedown', () => isKeyboardOp = false)
document.addEventListener('pointerdown', () => isKeyboardOp = false)

// 导航切换逻辑
const navigateToResult = (targetElement) => {
  targetElement.focus()
  if (isKeyboardOp) {
    targetElement.classList.add('custom-keyboard-focus')
    // 失焦时自动移除自定义类
    targetElement.addEventListener('blur', () => {
      targetElement.classList.remove('custom-keyboard-focus')
    }, { once: true })
  }
}