npm 包 focusable 使用教程

在前端开发中，我们经常需要处理元素的可聚焦性（focusable）。例如，在键盘导航和辅助功能方面，确保页面上正确的元素可以获得焦点非常重要。为了简化这个过程，我们可以使用 focusable 这个 npm 包。

安装

您可以通过 npm 安装 focusable：

npm install focusable --save

使用方法

一旦安装完成，您可以按照以下步骤来使用它：

1. 引入 focusable 模块：

   import { findFocusable } from 'focusable';

2. 执行 findFocusable() 方法，它将返回一个包含所有可聚焦元素的数组：

   const focusableElements = findFocusable(document);

3. 对于每个可聚焦的元素，您都可以设置/获取焦点：

   // 设置焦点
   focusableElements[0].focus();
   
   // 获取当前焦点
   const focusedElement = document.activeElement;

示例代码

下面是一个示例，演示如何使用 focusable 来处理一个菜单：

// javascriptcn.com 代码示例
<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

<script>
  import { findFocusable } from 'focusable';

  const menu = document.querySelector('ul');
  const focusableElements = findFocusable(menu);

  let focusedIndex = 0;

  // 设置默认焦点
  focusableElements[focusedIndex].focus();

  // 处理键盘导航
  menu.addEventListener('keydown', e => {
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      focusedIndex = Math.min(focusedIndex + 1, focusableElements.length - 1);
      focusableElements[focusedIndex].focus();
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      focusedIndex = Math.max(focusedIndex - 1, 0);
      focusableElements[focusedIndex].focus();
    }
  });
</script>

上面的示例演示了如何使用 focusable 来处理一个简单的菜单。它从菜单中找到所有可聚焦元素，设置默认焦点，并监听键盘事件来导航焦点。

总结

使用 focusable 可以更轻松地处理可聚焦元素。它是一个非常有用的 npm 包，在键盘导航和辅助功能方面尤其有用。希望这篇教程对您有所帮助！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/35382