在开发网页应用中，需要为一些元素设置聚焦限制，因为当用户通过 Tab 键或鼠标点击界面时，焦点可能会跑到意料之外的位置上。这时候，@daniel.husar/focus-trap 就能派上用场了。
介绍
@daniel.husar/focus-trap 是一个 npm 包，可以帮助开发者管理聚焦限制。它会在指定区域内捕获所有聚焦事件，并把焦点限制在该区域内。这个 npm 包有着微小的代码体积，同时能够很好地解决问题。
安装
使用下面的命令来安装 @daniel.husar/focus-trap:
--- ------- ------------------------
需要注意的是，@daniel.husar/focus-trap 依赖于一些 React Hooks，所以在使用之前确保你的项目是 React 项目。
用法
如果你有一个需要限制聚焦的区域，你可以使用 @daniel.husar/focus-trap 非常容易地做到。
在 React 组件中使用
首先，需要在需要进行聚焦限制的元素周围包裹一个 div：
---- -------------------- -------------- --- ------
然后，在你的 React 组件里面，你需要调用 @daniel.husar/focus-trap:
------ ----- ---- -------
------ ------------ ---- --------------------------
-------- -------------- -
----- ------- - --------------
------ -
---- -------------------- ------------- --------------
---
------
-
-这样，@daniel.husar/focus-trap 就能自动开始工作了。
在普通网页中使用
如果是在普通的网页中使用 @daniel.husar/focus-trap，首先需要在需要进行聚焦限制的元素周围包裹一个 div：
---- -------------------- -------------- --- ------
然后，你需要手动调用 useFocusTrap 函数：
------ - ------------ - ---- -------------------------- ----- -------------- - ------------------------------------------ ----- ------- - ----------------------------
这样，@daniel.husar/focus-trap 就会限制聚焦到 modal-container 内。
示例代码
我们来看一个完整的示例代码。这个代码演示了如何在 React 项目中使用 @daniel.husar/focus-trap。
------ ------ - -------- - ---- -------
------ - ------------ - ---- --------------------------
-------- -------------- -
----- ------ -------- - ------------
----- ------- - --------------
----- ---------------- - ------- -- -
---------
--------
-------------------- ------------------
--
-
----- ------------ - -- -- -
-- ------ --- ---- ---------
-
------ -
---- -------------------- ------------- --------------
----- ------------------------
-------
---------
------
-----------
---------------
---------------------
---------------------------
--
--------
-------
---------
------
---------------
---------------
---------------------
---------------------------
--
--------
------- -----------------------------
-------
------
-
-结论
使用 @daniel.husar/focus-trap，你可以很轻松地为某些元素设置聚焦限制。同时，它也非常容易上手。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668f7d9381d61a3540f2e