# @a11y/focus-trap 中文文档

规范地址：https://npmcn.com/package/%40a11y/focus-trap/

版本：1\.0\.5
npm 元数据更新时间：2022-04-04T10:52:46.899Z
中文译文更新时间：2026-11-05T18:39:51.836Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40a11y/focus-trap
原文对照：https://npmcn.com/package/%40a11y/focus-trap/?lang=original
项目主页：https://github.com/andreasbm/focus-trap#readme
源码仓库：https://github.com/andreasbm/focus-trap

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：26.6 kB，17 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2019-03-23T15:34:39.733Z
- 最新版本发布：2019-11-09T19:21:01.737Z
- 近 30 天下载量：58738（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）

## 中文简介

将焦点困入 DOM 节点的轻量级网络组件

## 安装

```sh
npm install @a11y/focus-trap
```

也可以使用：`pnpm add @a11y/focus-trap`、`yarn add @a11y/focus-trap`、`bun add @a11y/focus-trap`

## README

# @ a11y/ 焦点陷阱

[![Downloads per month](https://img.shields.io/npm/dm/@a11y/focus-trap.svg)](https://npmcharts.com/compare/@a11y/focus-trap?minimal=true) [![NPM Version](https://img.shields.io/npm/v/@a11y/focus-trap.svg)](https://www.npmjs.com/package/@a11y/focus-trap) [![Dependencies](https://img.shields.io/david/andreasbm/focus-trap.svg)](https://david-dm.org/andreasbm/focus-trap) [![Contributors](https://img.shields.io/github/contributors/andreasbm/focus-trap.svg)](https://github.com/andreasbm/focus-trap/graphs/contributors) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@a11y/focus-trap)

**将焦点困入 DOM 节点的轻量级网络组件**  
焦点陷阱确保 `tab` 财务报告和审定财务报表 `shift + tab` 键将循环通过焦点陷阱的可制取元素,但不离开焦点陷阱。 这是伟大的制造 [无障碍模式](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html)。到这里看演示 [https://appnest-demo.firebaseapp.com/焦点-陷阱/](https://appnest-demo.firebaseapp.com/focus-trap/)。 。 。 .

  

![](https://raw.githubusercontent.com/andreasbm/focus-trap/master/assets/demo.gif)

-   有一件事非常棒,它把焦点困住!
-   皮尔斯在寻找可聚焦元素时会穿过阴影根.
-   在盒子里工作(加入你的标记)
-   创建时只使用 vanilla js - 没有依赖性和框架不可知性 !

[![\-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](https://npmcn.com/package/%40a11y/focus-trap/#readme-installation)

## \* 安装

```javascript
npm i @a11y/focus-trap
```

[![\-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](https://npmcn.com/package/%40a11y/focus-trap/#readme-usage)

## 使用量

导入 `@a11y/focus-trap` 在你的代码中某个地方 你准备去! 只要把焦点陷阱添加到您的 `html` 它会工作 没有你的任何努力.

```html
<focus-trap>
  <button>Focus 1</button>
  <button>Focus 2</button>
  <button>Focus 3</button>
  <button>Focus 4</button>
  <button>Focus 5</button>
</focus-trap>
```

[![\-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](https://npmcn.com/package/%40a11y/focus-trap/#readme-api)

## • API

这个 `focus-trap` 元素执行以下接口.

```typescript
interface IFocusTrap {
  // Returns whether or not the focus trap is inactive.
  inactive: boolean;

  // Returns whether the focus trap currently has focus.
  readonly focused: boolean;

  // Focuses the first focusable element in the focus trap.
  focusFirstElement: (() => void);

  // Focuses the last focusable element in the focus trap.
  focusLastElement: (() => void);

  // Returns a list of the focusable children found within the element.
  getFocusableElements: (() => HTMLElement[]);
}
```

[![\-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](https://npmcn.com/package/%40a11y/focus-trap/#readme-license)

## 许可证

许可证根据 [麻省理工学院](https://opensource.org/licenses/MIT)。 。 。 .

## 常见问题

### @a11y/focus-trap 是什么？

将焦点困入 DOM 节点的轻量级网络组件

### 如何安装 @a11y/focus-trap？

在项目目录运行 npm install @a11y/focus-trap，或使用 pnpm add / yarn add / bun add。

### @a11y/focus-trap 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @a11y/focus-trap 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @a11y/focus-trap 可以商用吗？

@a11y/focus-trap 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @a11y/focus-trap 的下载量有多少？

根据 npm 官方下载统计，@a11y/focus-trap 在 2026/10/05 – 2026/11/03 这 30 天内被下载 58,738 次，日均约 1,958 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @a11y/focus-trap 还在维护吗？

最新版本 1\.0\.5 发布于 2019/11/10（6 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/03/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。