如今，許多 Web 應(yīng)用都提供了鍵盤(pán)快捷鍵。通過(guò)使用鍵盤(pán)快捷鍵，用戶可以快速地進(jìn)行常見(jiàn)任務(wù)。在前端開(kāi)發(fā)中，實(shí)現(xiàn)鍵盤(pán)快捷鍵功能需要編寫(xiě)大量的 JavaScript 代碼。為了簡(jiǎn)化這個(gè)過(guò)程，出現(xiàn)了一些優(yōu)秀的前端快捷鍵工具庫(kù)。本文將介紹幾個(gè)流行的前端快捷鍵工具庫(kù)，幫助你快速實(shí)現(xiàn)鍵盤(pán)快捷鍵功能！

圖片

Mousetrap

Mousetrap 是一個(gè) JavaScript 庫(kù)，它提供了一種簡(jiǎn)單的方式來(lái)捕獲鍵盤(pán)輸入，用于創(chuàng)建鍵盤(pán)快捷鍵等交互式功能。它可以輕松地綁定鍵盤(pán)按鍵和組合鍵到回調(diào)函數(shù)，從而幫助開(kāi)發(fā)者快速實(shí)現(xiàn)一些特定的功能，如全屏切換、復(fù)制粘貼數(shù)據(jù)等。Mousetrap 的使用非常方便，只需要引入相應(yīng)的 JavaScript 文件并設(shè)置監(jiān)聽(tīng)器即可。它支持鍵盤(pán)事件的無(wú)沖突處理，也可以在特定的區(qū)域禁用或啟用監(jiān)聽(tīng)器。

這個(gè)庫(kù)與其他類(lèi)似的庫(kù)相比有以下幾個(gè)不同之處：

• 沒(méi)有外部依賴，不需要使用其他框架。
• 不僅支持 keydown 事件，還可以指定 keypress、keydown 或 keyup 事件，或者直接讓 Mousetrap 自動(dòng)選擇。
• 可以將鍵盤(pán)事件直接綁定到特殊鍵，如？或*，而無(wú)需指定 shift+/ 或 shift+8 等在所有鍵盤(pán)上都不一致的鍵。
• 支持國(guó)際鍵盤(pán)布局。
• 可以綁定類(lèi)似 Gmail 的鍵序列，除了常規(guī)按鍵和鍵組合之外。
• 可以使用 trigger() 方法編程觸發(fā)鍵盤(pán)事件。
• 支持計(jì)算機(jī)鍵盤(pán)上的數(shù)字鍵。
• 代碼有詳細(xì)的文檔和注釋。

Mousetrap 可以通過(guò) npm 安裝使用。具體步驟如下：

1. 打開(kāi)終端或命令行工具，進(jìn)入項(xiàng)目目錄。運(yùn)行以下命令來(lái)安裝 Mousetrap：

npm install mousetrap

2. 在 JavaScript 文件中引入 Mousetrap：

import Mousetrap from 'mousetrap';

3. 在需要監(jiān)聽(tīng)鍵盤(pán)事件的地方，創(chuàng)建相應(yīng)的監(jiān)聽(tīng)器：

Mousetrap.bind('command+shift+s', function() {
  // 處理鍵盤(pán)事件的回調(diào)函數(shù)
});

這里綁定了一個(gè)組合鍵（命令鍵 + shift 鍵 + s 鍵）到回調(diào)函數(shù)，當(dāng)用戶按下該組合鍵時(shí)，會(huì)觸發(fā)回調(diào)函數(shù)。

Github：https://github.com/ccampbell/mousetrap

Hotkeys

Hotkeys 是一個(gè)用于在 Web 應(yīng)用中設(shè)置和管理鍵盤(pán)快捷鍵的 JavaScript 庫(kù)。它允許開(kāi)發(fā)人員使用簡(jiǎn)單的語(yǔ)法，為應(yīng)用程序中的各種操作綁定鍵盤(pán)快捷鍵。這個(gè)庫(kù)可以用來(lái)添加、刪除和禁用快捷鍵，還可以與其他 JavaScript 庫(kù)集成使用。

在一些其他的快捷鍵庫(kù)中，開(kāi)發(fā)者可能需要編寫(xiě)大量的代碼才能夠?qū)崿F(xiàn)一個(gè)簡(jiǎn)單的功能，而 Hotkeys 庫(kù)則提供了簡(jiǎn)潔易用的 API 接口和豐富的事件處理選項(xiàng)。同時(shí)，Hotkeys 庫(kù)具有輕量級(jí)、易于使用和靈活可擴(kuò)展等特點(diǎn)。另外，在 Hotkeys 的官方文檔中也提供了詳細(xì)的文檔說(shuō)明和示例，方便開(kāi)發(fā)人員快速上手使用。

Hotkeys 可以通過(guò) npm 安裝使用。具體步驟如下：

1. 打開(kāi)終端或命令行工具，進(jìn)入項(xiàng)目目錄。運(yùn)行以下命令來(lái)安裝 Hotkeys：

npm install hotkeys-js --save

2. 在 JavaScript 文件中引入 Hotkeys：

import hotkeys from 'hotkeys-js';

3. 在需要監(jiān)聽(tīng)鍵盤(pán)事件的地方，創(chuàng)建相應(yīng)的監(jiān)聽(tīng)器：

hotkeys('ctrl+a,ctrl+b,r,f', function (event, handler){
  switch (handler.key) {
    case 'ctrl+a': alert('you pressed ctrl+a!');
      break;
    case 'ctrl+b': alert('you pressed ctrl+b!');
      break;
    case 'r': alert('you pressed r!');
      break;
    case 'f': alert('you pressed f!');
      break;
    default: alert(event);
  }
});

Github：https://github.com/jaywcjlove/hotkeys-js

Tinykeys

Tinykeys 是一個(gè)在Web應(yīng)用中設(shè)置和管理鍵盤(pán)快捷鍵的JavaScript庫(kù)，它比Hotkeys更加輕量級(jí)和易于使用。該庫(kù)允許開(kāi)發(fā)人員通過(guò)一行代碼來(lái)為應(yīng)用程序中的各種操作綁定鍵盤(pán)快捷鍵。與Hotkeys類(lèi)似，Tinykeys也具有添加、刪除和禁用快捷鍵以及與其他JavaScript庫(kù)集成使用的功能。

Tinykeys 可以通過(guò) npm 安裝使用。具體步驟如下：

1. 打開(kāi)終端或命令行工具，進(jìn)入項(xiàng)目目錄。運(yùn)行以下命令來(lái)安裝 Tinykeys：

npm install tinykeys

2. 在需要使用Tinykeys的JavaScript文件中，通過(guò)import語(yǔ)句導(dǎo)入Tinykeys庫(kù)：

import tinykeys from 'tinykeys';

3. 使用tinykeys()方法將鍵盤(pán)按鍵映射到需要執(zhí)行的功能。例如：

tinykeys(window, {
  'Shift+Enter': (event) => {
    console.log('Shift+Enter has been pressed');
  }
});

Github：https://github.com/jamiebuilds/tinykeys

useHotkeys

useHotkeys是一個(gè)React Hook，用于在React函數(shù)組件中設(shè)置和管理鍵盤(pán)快捷鍵。useHotkeys支持大多數(shù)鍵盤(pán)和操作系統(tǒng)，并且與其他React Hooks和第三方庫(kù)兼容。

可以通過(guò)以下步驟來(lái)安裝和使用useHotkeys：

1. 在命令行中運(yùn)行以下命令，使用npm安裝useHotkeys庫(kù)：

npm install react-hotkeys-hook

2. 在需要使用useHotkeys的React函數(shù)組件中，通過(guò)import語(yǔ)句導(dǎo)入useHotkeys庫(kù)：

import { useHotkeys } from 'react-hotkeys-hook';

3. 在組件內(nèi)部調(diào)用useHotkeys() Hook方法來(lái)設(shè)置鍵盤(pán)快捷鍵的響應(yīng)函數(shù)及相關(guān)配置：

export const ExampleComponent = () => {
  const [count, setCount] = useState(0)
  useHotkeys('ctrl+k', () => setCount(count + 1), [count])

  return (
    <p>
      Pressed {count} times.
    </p>
  )
}

Github：https://github.com/JohannesKlauss/react-hotkeys-hook

其他

很多應(yīng)用支持使用 cmd（ctrl）+ k 來(lái)調(diào)出選擇框，可以使用快捷鍵進(jìn)行后續(xù)操作。

圖片

Cmdk

?K是一個(gè)靈活的React組件，可以用于創(chuàng)建命令菜單或可訪問(wèn)的組合框。它支持自定義API，可以通過(guò)組合其他組件或靜態(tài)JSX來(lái)實(shí)現(xiàn)個(gè)性化需求。

圖片

使用方式如下：

1. 安裝cmdk：

npm install cmdk

2. 使用：

import { Command } from 'cmdk'

const CommandMenu = () => {
  const [open, setOpen] = React.useState(false)

  // Toggle the menu when ?K is pressed
  React.useEffect(() => {
    const down = (e) => {
      if (e.key === 'k' && e.metaKey) {
        setOpen((open) => !open)
      }
    }

    document.addEventListener('keydown', down)
    return () => document.removeEventListener('keydown', down)
  }, [])

  return (
    <Command.Dialog open={open} onOpenChange={setOpen} label="Global Command Menu">
      <Command.Input />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>

        <Command.Group heading="Letters">
          <Command.Item>a</Command.Item>
          <Command.Item>b</Command.Item>
          <Command.Separator />
          <Command.Item>c</Command.Item>
        </Command.Group>

        <Command.Item>Apple</Command.Item>
      </Command.List>
    </Command.Dialog>
  )
}

Github：https://github.com/pacocoursey/cmdk

Ninja Keys

Ninja Keys 是一個(gè)可以集成到網(wǎng)站中的鍵盤(pán)快捷鍵 UI 組件，支持使用純 JavaScript、Vue 和 React 來(lái)創(chuàng)建自定義的快捷鍵。在許多應(yīng)用中，用戶會(huì)按下 ?+k（或 ctrl+k） 打開(kāi)搜索 UI 界面，Ninja Keys 類(lèi)似于這一模式。

圖片

使用方式如下：

1. 安裝 Ninja Keys：

npm i ninja-keys

2. 使用：

<script>
  const ninja = document.querySelector('ninja-keys');
  ninja.data = [
    {
      id: 'Projects',
      title: 'Open Projects',
      hotkey: 'ctrl+N',
      icon: 'apps',
      section: 'Projects',
      handler: () => {
        // it's auto register above hotkey with this handler
        alert('Your logic to handle');
      },
    },
    {
      id: 'Theme',
      title: 'Change theme...',
      icon: 'desktop_windows',
      children: ['Light Theme', 'Dark Theme', 'System Theme'],
      hotkey: 'ctrl+T',
      handler: () => {
        // open menu if closed. Because you can open directly that menu from it's hotkey
        ninja.open({ parent: 'Theme' });
        // if menu opened that prevent it from closing on select that action, no need if you don't have child actions
        return {keepOpen: true};
      },
    },
    {
      id: 'Light Theme',
      title: 'Change theme to Light',
      icon: 'light_mode',
      parent: 'Theme',
      handler: () => {
        // simple handler
        document.documentElement.classList.remove('dark');
      },
    },
    {
      id: 'Dark Theme',
      title: 'Change theme to Dark',
      icon: 'dark_mode',
      parent: 'Theme',
      handler: () => {
        document.documentElement.classList.add('dark');
      },
    },
  ];
</script>

Github：https://github.com/ssleptsov/ninja-keys