您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

前端快速实现快捷键功能,超实用!

时间:2023-05-05 11:40:59  来源:前端宝藏  作者:

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

图片

Mousetrap

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

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

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

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

  1. 打开终端或命令行工具,进入项目目录。运行以下命令来安装 Mousetrap:
npm install mousetrap
  1. 在 JavaScript 文件中引入 Mousetrap:
import Mousetrap from 'mousetrap';
  1. 在需要监听键盘事件的地方,创建相应的监听器:
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 安装使用。具体步骤如下:

  1. 打开终端或命令行工具,进入项目目录。运行以下命令来安装 Hotkeys:
npm install hotkeys-js --save
  1. 在 JavaScript 文件中引入 Hotkeys:
 
import hotkeys from 'hotkeys-js';
  1. 在需要监听键盘事件的地方,创建相应的监听器:
 
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 安装使用。具体步骤如下:

  1. 打开终端或命令行工具,进入项目目录。运行以下命令来安装 Tinykeys:
npm install tinykeys
  1. 在需要使用Tinykeys的JavaScript文件中,通过import语句导入Tinykeys库:
import tinykeys from 'tinykeys';
  1. 使用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:

  1. 在命令行中运行以下命令,使用npm安装useHotkeys库:
npm install react-hotkeys-hook
  1. 在需要使用useHotkeys的React函数组件中,通过import语句导入useHotkeys库:
import { useHotkeys } from 'react-hotkeys-hook';
  1. 在组件内部调用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来实现个性化需求。

图片

使用方式如下:

  1. 安装cmdk:
npm install cmdk
  1. 使用:
 
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 类似于这一模式。

图片

使用方式如下:

  1. 安装 Ninja Keys:
npm i ninja-keys
  1. 使用:
<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



Tags:前端   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
如今,许多 Web 应用都提供了键盘快捷键。通过使用键盘快捷键,用户可以快速地进行常见任务。在前端开发中,实现键盘快捷键功能需要编写大量的 JavaScript 代码。为了简化这个过...【详细内容】
2023-05-05  Tags: 前端  点击:(0)  评论:(0)  加入收藏
整理 | 何苗出品 | CSDN(ID:CSDNnews)当 GPT-4 向大家展示了如何用十秒把一个网站的手绘草图变成功能齐全的网站,包括一些炫酷的js链接按钮,技惊四座。不可避免地,前端工程师们也...【详细内容】
2023-04-28  Tags: 前端  点击:(3)  评论:(0)  加入收藏
一、前言 前端已死这个说法并不是事实,而是一种极端的观点。事实上,前端开发在当今的互联网行业中扮演着至关重要的角色,它是构建 Web 应用程序所必需的一部分,能够实现动态交互...【详细内容】
2023-04-26  Tags: 前端  点击:(6)  评论:(0)  加入收藏
近年来,随着互联网技术的兴起,人们对其的用户体验要求也越来越高,这让Web前端一度成为炙手可热的就业岗位。由于其门槛低、薪资高,不少人纷纷转行,让不少还在观望的小白想了解一...【详细内容】
2023-04-21  Tags: 前端  点击:(13)  评论:(0)  加入收藏
随着前端项目中使用的依赖包越来越多,而其中一部分依赖包可能并未被项目所使用,手动查找这些依赖包既耗时又繁琐。那么,有没有工具能够快速地帮助我们识别和清理项目中未使用的...【详细内容】
2023-04-21  Tags: 前端  点击:(21)  评论:(0)  加入收藏
后端开发待遇更高,两者之间相互比较的话,一般来说后端开发的岗位薪资水平会略高一些,这是因为大多数小型企业对开发者的要求不仅仅是要掌握自己岗位的技术并且还需要掌握其他技...【详细内容】
2023-04-20  Tags: 前端  点击:(13)  评论:(0)  加入收藏
抖音开源了一个前端UI框架-Semi-UI,还是不错的。大家可以了解下哈,等成熟了,可以用用。Semi-UI,现代、全面、灵活的设计系统和 UI 库。快速搭建美观的React 应用。github开源地...【详细内容】
2023-04-18  Tags: 前端  点击:(39)  评论:(0)  加入收藏
最近数据统计显示,web前端开发工程师的薪资区间(以北京为例)大约在 2 - 50K,其中 20-30K 的岗位最多占 30.8%2023年以来web前端开发工程师的需求量逐渐稳步提升web前端开发全国...【详细内容】
2023-04-18  Tags: 前端  点击:(15)  评论:(0)  加入收藏
1.什么是 esm?esm 是将 javascript 程序拆分成多个单独模块,并能按需导入的标准。和 webpack,babel 不同的是,esm 是 javascript 的标准功能,在浏览器端和 nodejs 中都已得到实现...【详细内容】
2023-04-11  Tags: 前端  点击:(26)  评论:(0)  加入收藏
在Web前端工程化开发中,我们通常需要多个环境,至少需要开发和生产环境,也可能还需要不同的测试环境。那么,我是怎样配置多环境的呢?通常,一些脚手架都有配置多环境的解决方案,比如...【详细内容】
2023-04-07  Tags: 前端  点击:(11)  评论:(0)  加入收藏
▌简易百科推荐
在Vue项目中,当某一组件需要添加共用的逻辑或全局方法时,我们可以借助mixin来实现代码复用。在本篇文章中,我们将为您详细介绍在Vue项目中如何引入和使用mixin,同时配合实例代码...【详细内容】
2023-05-06  老汤前端  今日头条  Tags:Vue   点击:(2)  评论:(0)  加入收藏
如今,许多 Web 应用都提供了键盘快捷键。通过使用键盘快捷键,用户可以快速地进行常见任务。在前端开发中,实现键盘快捷键功能需要编写大量的 JavaScript 代码。为了简化这个过...【详细内容】
2023-05-05    前端宝藏  Tags:前端   点击:(0)  评论:(0)  加入收藏
整理 | 何苗出品 | CSDN(ID:CSDNnews)当 GPT-4 向大家展示了如何用十秒把一个网站的手绘草图变成功能齐全的网站,包括一些炫酷的js链接按钮,技惊四座。不可避免地,前端工程师们也...【详细内容】
2023-04-28    CSDN  Tags:前端   点击:(3)  评论:(0)  加入收藏
一、前言 前端已死这个说法并不是事实,而是一种极端的观点。事实上,前端开发在当今的互联网行业中扮演着至关重要的角色,它是构建 Web 应用程序所必需的一部分,能够实现动态交互...【详细内容】
2023-04-26  小徐码字  搜狐号  Tags:前端   点击:(6)  评论:(0)  加入收藏
Vue 正在不断发展,目前,在Vue 3 中有多种定义组件的方法。从选项到组合再到类 API,情况大不相同,如果您刚刚开始,可能会感到困惑。让我们定义一个简单的组件并使用所有可用的方...【详细内容】
2023-04-25  web前端开发  微信公众号  Tags:Vue 3   点击:(9)  评论:(0)  加入收藏
近年来,随着互联网技术的兴起,人们对其的用户体验要求也越来越高,这让Web前端一度成为炙手可热的就业岗位。由于其门槛低、薪资高,不少人纷纷转行,让不少还在观望的小白想了解一...【详细内容】
2023-04-21  金信润天  搜狐号  Tags:前端   点击:(13)  评论:(0)  加入收藏
随着前端项目中使用的依赖包越来越多,而其中一部分依赖包可能并未被项目所使用,手动查找这些依赖包既耗时又繁琐。那么,有没有工具能够快速地帮助我们识别和清理项目中未使用的...【详细内容】
2023-04-21  前端充电宝  微信公众号  Tags:前端   点击:(21)  评论:(0)  加入收藏
现在因为有个上传组件他用到了这个mixin文件,这个mixin文件中mounted请求了接口,这样一个页面中如果有多个上传组件的话,那么就会导致一上来就会一次性请求多个重复的接口,有什...【详细内容】
2023-04-18  前端阳光  微信公众号  Tags:Vue   点击:(12)  评论:(0)  加入收藏
1.什么是 esm?esm 是将 javascript 程序拆分成多个单独模块,并能按需导入的标准。和 webpack,babel 不同的是,esm 是 javascript 的标准功能,在浏览器端和 nodejs 中都已得到实现...【详细内容】
2023-04-11  高级前端进阶  今日头条  Tags:前端   点击:(26)  评论:(0)  加入收藏
大家好,我是沐华。最近一个粉丝公司项目由 Vue2 升级到 Vue3 了,他一下子不适应,有好多不会用的,所以我就写了这篇开发文档,包含了 Vue3 开发中使用的所有语法,希望所有像他一样还...【详细内容】
2023-04-10  沐华    Tags:Vue3   点击:(12)  评论:(0)  加入收藏
站内最新
站内热门
站内头条