html原生``元素默认支持键盘上下键切换高亮选项，需确保未禁用、tabindex不为-1；自定义下拉须手动监听keydown事件并维护索引，配合aria属性提升可访问性。

HTML原生 `` 元素默认就支持键盘上下键切换高亮选项，无需额外 JavaScript —— 只要它处于焦点状态（比如按 Tab 键进入，或鼠标点击后），即可用 ↑ ↓ 键逐项移动选中项，Enter 或 Space 确认选择。

确保可聚焦与基础可用性

原生 `` 天然具备键盘导航能力，但前提是：

• 元素不能被禁用（即没有 `disabled` 属性）
• 不能设置 `tabindex="-1"`（这会移除其 Tab 键可达性）
• 推荐保留默认 `` 结构，避免用 `
  ` + JS 模拟下拉——后者需手动实现键盘逻辑

  自定义下拉菜单的上下键支持

  如果你用的是自定义结构（如 `

  

  html-ppt-to-pdf

  将使用 `

  ` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

  下载

  ` + `

  ` 列表），就必须手动监听键盘事件：
  • 为下拉容器或触发按钮添加 `tabindex="0"`，使其可被 Tab 键聚焦
  • 监听 `keydown` 事件，识别 `ArrowUp` / `ArrowDown` 键
  • 维护一个当前高亮索引（例如 `let currentIndex = -1`）
  • 每次按键时更新索引，并给对应 `
  • ` 添加 `.active` 类（配合 CSS 高亮）
  • 按 Enter 或 Space 时，触发该选项的点击行为

  可访问性增强要点

  为了让键盘用户真正“感知”到操作路径，建议补充：

  • 给下拉容器加上 `role="listbox"`，每个选项加 `role="option"`
  • 用 `aria-selected="true"` 标记当前高亮项
  • 确保 `aria-activedescendant` 指向当前聚焦项 ID（适用于复杂控件）
  • 避免在选项上使用 `onclick`，改用 `addEventListener('click', ...)` 并同时绑定 `keydown`

  常见失效原因

  如果上下键没反应，先检查：

  • 是否误用了 `contenteditable="true"` 或 `pointer-events: none` 阻断了事件
  • 是否在 `keydown` 中调用了 `event.preventDefault()` 却未做相应处理
  • 是否多个下拉共用同一事件监听器却未区分目标容器
  • 是否 CSS 设置了 `outline: none` 且未提供替代焦点样式，导致看不见当前焦点在哪

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！