当前位置：首页 > 科技 > 软件

前端快速实现快捷键功能，超实用！

来源：责编：时间：2023-11-02 17:14:01 250观看

导读如今，许多 Web 应用都提供了键盘快捷键。通过使用键盘快捷键，用户可以快速地进行常见任务。在前端开发中，实现键盘快捷键功能需要编写大量的 JavaScript 代码。为了简化这个过程，出现了一些优秀的前端快捷键工具库。本文

如今，许多 Web 应用都提供了键盘快捷键。通过使用键盘快捷键，用户可以快速地进行常见任务。在前端开发中，实现键盘快捷键功能需要编写大量的 JavaScript 代码。为了简化这个过程，出现了一些优秀的前端快捷键工具库。本文将介绍几个流行的前端快捷键工具库，帮助你快速实现键盘快捷键功能！

图片

Mousetrap

Mousetrap 是一个 JavaScript 库，它提供了一种简单的方式来捕获键盘输入，用于创建键盘快捷键等交互式功能。它可以轻松地绑定键盘按键和组合键到回调函数，从而帮助开发者快速实现一些特定的功能，如全屏切换、复制粘贴数据等。Mousetrap 的使用非常方便，只需要引入相应的 JavaScript 文件并设置监听器即可。它支持键盘事件的无冲突处理，也可以在特定的区域禁用或启用监听器。

这个库与其他类似的库相比有以下几个不同之处：

没有外部依赖，不需要使用其他框架。
不仅支持 keydown 事件，还可以指定 keypress、keydown 或 keyup 事件，或者直接让 Mousetrap 自动选择。
可以将键盘事件直接绑定到特殊键，如？或*，而无需指定 shift+/ 或 shift+8 等在所有键盘上都不一致的键。
支持国际键盘布局。
可以绑定类似 Gmail 的键序列，除了常规按键和键组合之外。
可以使用 trigger() 方法编程触发键盘事件。
支持计算机键盘上的数字键。
代码有详细的文档和注释。

Mousetrap 可以通过 npm 安装使用。具体步骤如下：

打开终端或命令行工具，进入项目目录。运行以下命令来安装 Mousetrap：

npm install mousetrap

在 JavaScript 文件中引入 Mousetrap：

import Mousetrap from 'mousetrap';

在需要监听键盘事件的地方，创建相应的监听器：

Mousetrap.bind('command+shift+s', function() {  // 处理键盘事件的回调函数});

这里绑定了一个组合键（命令键 + shift 键 + s 键）到回调函数，当用户按下该组合键时，会触发回调函数。

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

Hotkeys

Hotkeys 是一个用于在 Web 应用中设置和管理键盘快捷键的 JavaScript 库。它允许开发人员使用简单的语法，为应用程序中的各种操作绑定键盘快捷键。这个库可以用来添加、删除和禁用快捷键，还可以与其他 JavaScript 库集成使用。

在一些其他的快捷键库中，开发者可能需要编写大量的代码才能够实现一个简单的功能，而 Hotkeys 库则提供了简洁易用的 API 接口和丰富的事件处理选项。同时，Hotkeys 库具有轻量级、易于使用和灵活可扩展等特点。另外，在 Hotkeys 的官方文档中也提供了详细的文档说明和示例，方便开发人员快速上手使用。

Hotkeys 可以通过 npm 安装使用。具体步骤如下：

打开终端或命令行工具，进入项目目录。运行以下命令来安装 Hotkeys：

npm install hotkeys-js --save

在 JavaScript 文件中引入 Hotkeys：

import hotkeys from 'hotkeys-js';

在需要监听键盘事件的地方，创建相应的监听器：

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 是一个在Web应用中设置和管理键盘快捷键的JavaScript库，它比Hotkeys更加轻量级和易于使用。该库允许开发人员通过一行代码来为应用程序中的各种操作绑定键盘快捷键。与Hotkeys类似，Tinykeys也具有添加、删除和禁用快捷键以及与其他JavaScript库集成使用的功能。

Tinykeys 可以通过 npm 安装使用。具体步骤如下：

打开终端或命令行工具，进入项目目录。运行以下命令来安装 Tinykeys：

npm install tinykeys

在需要使用Tinykeys的JavaScript文件中，通过import语句导入Tinykeys库：

import tinykeys from 'tinykeys';

使用tinykeys()方法将键盘按键映射到需要执行的功能。例如：

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

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

useHotkeys

useHotkeys是一个React Hook，用于在React函数组件中设置和管理键盘快捷键。useHotkeys支持大多数键盘和操作系统，并且与其他React Hooks和第三方库兼容。

可以通过以下步骤来安装和使用useHotkeys：

在命令行中运行以下命令，使用npm安装useHotkeys库：

npm install react-hotkeys-hook

在需要使用useHotkeys的React函数组件中，通过import语句导入useHotkeys库：

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

在组件内部调用useHotkeys() Hook方法来设置键盘快捷键的响应函数及相关配置：

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

其他

很多应用支持使用 cmd（ctrl）+ k 来调出选择框，可以使用快捷键进行后续操作。

图片

Cmdk

⌘K是一个灵活的React组件，可以用于创建命令菜单或可访问的组合框。它支持自定义API，可以通过组合其他组件或静态JSX来实现个性化需求。

图片

使用方式如下：

安装cmdk：

npm install cmdk

使用：

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 是一个可以集成到网站中的键盘快捷键 UI 组件，支持使用纯 JavaScript、Vue 和 React 来创建自定义的快捷键。在许多应用中，用户会按下 ⌘+k（或 ctrl+k）打开搜索 UI 界面，Ninja Keys 类似于这一模式。

图片

使用方式如下：

安装 Ninja Keys：

npm i ninja-keys

使用：

<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

本文链接：http://www.28at.com/showinfo-26-16639-0.html前端快速实现快捷键功能，超实用！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： gRPC 为什么这么快？

下一篇： C++与设计模式有什么关系？

标签：

热门焦点

鸿蒙OS 4.0公测机型公布：甚至连nova6都支持

华为全新的HarmonyOS 4.0操作系统将于今天下午正式登场，官方在发布会之前也已经正式给出了可升级的机型产品，这意味着这些机型会率先支持升级享用。这次的HarmonyOS 4.0支持
影音体验是真的强简单聊聊iQOO Pad

大公司的好处就是产品线丰富，非常细分化的东西也能给你做出来，例如早先我们看到了新的vivo Pad2，之后我们又在iQOO Neo8 Pro的发布会上看到了iQOO的首款平板产品iQOO Pad。虽
三言两语说透设计模式的艺术-简单工厂模式

一、写在前面工厂模式是最常见的一种创建型设计模式，通常说的工厂模式指的是工厂方法模式，是使用频率最高的工厂模式。简单工厂模式又称为静态工厂方法模式，不属于GoF 23种设计
Temu起诉SHEIN，跨境电商战事升级

来源 | 伯虎财经（bohuFN）作者 | 陈平安日前据外媒报道，拼多多旗下跨境电商平台Temu正对竞争对手SHEIN提起新诉讼，诉状称Shein“利用市场支配力量强迫服装厂商与之签订独家
得物宠物生意「狂飙」，发力“它经济”

作者｜花花小萌主近日，得物宣布正式上线宠物鉴别，通过得物App内的“在线鉴别”，可找到鉴别宠物的选项。通过上传自家宠物的部位细节，就能收获拥有专业资质认证的得物鉴
大厂卷向扁平化

来源：新熵作者丨南枝编辑丨月见大厂职级不香了。俗话说，兵无常势，水无常形，互联网企业调整职级体系并不稀奇。7月13日，淘宝天猫集团启动了近年来最大的人力制度改革，目前已形成一
网传小米汽车开始筛选交付中心建筑面积不低于3000平方米

7月7日消息，近日有微博网友@长三角行健者爆料称，据经销商集团反馈，小米汽车目前已经开始了交付中心的筛选工作，要求候选场地至少有120个车位，建筑不能低
电博会与软博会实现"线下+云端"的双线融合

在本次“电博会”与“软博会”双展会利好条件的加持下，既可以发挥展会拉动人流、信息流、资金流实现快速交互流动的作用，继而推动区域经济良性发展；又可以聚
北京：科技教育体验基地开始登记

　　北京“科技馆之城”科技教育体验基地登记和认证工作日前启动。首批北京科技教育体验基地拟于2023年全国科普日期间挂牌，后续还将开展常态化登记。　　北京科技教育体验基