如何仅在键盘操作时保留列表框焦点样式，鼠标点击时移除？-js教程-PHP中文网

如何仅在键盘操作时保留列表框焦点样式，鼠标点击时移除？

本文详解如何实现 aria 标准下 combobox 组件的“智能焦点”行为：仅当用户通过键盘导航（如 tab、方向键）激活选项时显示焦点轮廓，而鼠标点击时不触发视觉焦点，从而兼顾可访问性与 ui 干净度。

本文详解如何实现 aria 标准下 combobox 组件的“智能焦点”行为：仅当用户通过键盘导航（如 tab、方向键）激活选项时显示焦点轮廓，而鼠标点击时不触发视觉焦点，从而兼顾可访问性与 ui 干净度。

在构建符合 WAI-ARIA Combobox (Select-Only) 模式的自定义下拉组件时，一个常见且关键的可访问性需求是：区分输入方式——键盘导航需清晰可见焦点状态，而鼠标点击应避免冗余的焦点高亮（如蓝色外边框），防止视觉干扰。

当前示例中，.combo-option.option-current 类通过 outline: 3px solid #0067b8 强制渲染焦点环，但该样式对所有 :focus 场景一视同仁，导致鼠标点击后仍残留明显轮廓，违背“仅键盘可见”的设计原则。

✅ 正确解法：使用 `:focus-visible` + 渐进增强回退

现代浏览器支持 :focus-visible 伪类，它仅在用户通过键盘（而非鼠标/触摸）触发焦点时生效，完美匹配需求：

.combo-option.option-current {
  /* 移除默认 focus outline */
  outline: none;
}

/* 仅键盘操作时显示焦点环 */
.combo-option.option-current:focus-visible {
  outline: 3px solid #0067b8;
  outline-offset: -3px;
}

⚠️ 兼容性保障：为旧版浏览器提供 `@supports` 回退

由于 Safari 15.4 之前、部分旧版 Edge 等不支持 :focus-visible，需用 @supports 规则优雅降级：

.combo-option.option-current {
  outline: none; /* 始终禁用默认 focus */
}

.combo-option.option-current:focus-visible {
  outline: 3px solid #0067b8;
  outline-offset: -3px;
}

/* 当浏览器不支持 :focus-visible 时，退回到传统 :focus */
@supports not selector(:focus-visible) {
  .combo-option.option-current:focus {
    outline: 3px solid #0067b8;
    outline-offset: -3px;
  }
}

? 原理说明：@supports not selector(:focus-visible) 是 CSS 中检测选择器支持性的标准方式，比 UA 判断更可靠。它确保旧浏览器仍能获得基础键盘焦点反馈，而新浏览器优先启用更精准的 :focus-visible 行为。

? 额外建议：配合 JavaScript 增强体验

虽然 CSS 层面已解决核心问题，但为彻底消除鼠标点击后的瞬时焦点残留（尤其在快速连点时），可在 onOptionMouseDown 中主动移除焦点（注意不影响键盘逻辑）：

Select.prototype.onOptionMouseDown = function(event) {
  // 阻止鼠标点击触发 comboEl 的 focus 流程（避免 blur/focus 闪烁）
  event.preventDefault();
  // 可选：立即移除 listbox 的焦点，确保无视觉残留
  this.listboxEl.blur();
};

同时确保 onOptionClick 不再调用 focus()，保持焦点始终锚定在主 combobox 输入区（this.comboEl），符合 ARIA 推荐的焦点管理模型。

✅ 总结

方案	优点	缺点	适用场景
`:focus-visible`（推荐）	语义精准、原生支持、无需 JS	需检查兼容性	现代应用首选
`@supports` 回退	兼容 IE11+/旧 Safari，渐进增强	需额外 CSS 规则	生产环境必备
完全禁用 `outline`	简单粗暴	损害键盘用户可访问性 ❌	不推荐