### [HTML details 键盘操作：原生已支持回车空格](https://www.huociguo.com/article/1736)

**Published:** 2026-10-02T09:45:26

**Author:** 米了

**Excerpt:** 给 details 折叠面板加键盘支持，多数教程从监听 keydown 讲起。实际上 details 的键盘交…

给 details 折叠面板加键盘支持，多数教程从监听 keydown 讲起。实际上 details 的键盘交互是浏览器原生行为，不加一行脚本就已经可用。

![木桌上的键盘与鼠标](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-4792732.jpeg)

原生交互优先，脚本只补缺口。图片来自 Pexels。

## 原生已有什么

summary 元素天然可聚焦，Tab 键可以移到上面，回车与空格都能切换展开状态。读屏软件会把它播报为按钮并附带展开状态。这套行为零成本，也是 div 模拟方案要花几十行才能追平的基线。

## 什么时候才需要脚本

两类场景：一是绑定全局快捷键，例如按斜杠展开搜索面板；二是程序化控制，例如 hash 变化时展开对应面板。两者都是补充，不是替代。

## 正确的切换方式

panel.toggleAttribute('open');

open 是布尔属性，存在即展开。用 toggleAttribute 切换与原生行为完全一致，toggle 事件照常触发，CSS 选择器照常命中。

## 三个错误做法

其一，panel.open = ‘false’。布尔属性只看存在与否，赋值字符串 false 依然是展开状态。

其二，summary.click()。模拟点击绕开了焦点管理，键盘用户的焦点位置会丢失。

其三，给 summary 套 button。summary 自身已有按钮角色，再套一层会让读屏软件报出嵌套按钮，反而破坏无障碍。

## 快捷键的补充写法

addEventListener('keydown', (e) => {
  if (e.key === '/' && !e.target.matches('input, textarea')) {
    e.preventDefault();
    panel.toggleAttribute('open');
    panel.querySelector('summary').focus();
  }
});

输入框获得焦点时不拦截按键，切换后把焦点交给 summary，键盘流保持连续。

**Tags:** details标签, toggleAttribute, 无障碍交互, 焦点管理, 键盘快捷键

**Categories:** HTML5

---