牛逼！发现俩款前端快速实现快捷键功能的神器！

程序员老鱼

发布于 2023-09-07 08:51:26

6450

文章被收录于专栏：前端实验室前端实验室

上班浏览 Github 不算摸鱼吧...

闲来没事就逛逛 Github ，总能有意想不到的收获，这不又发现俩款神器，有了它就可以节省了很多开发时间，可以用来摸鱼了...

很多 Web 应用都提供了键盘快捷键功能，如果要自己从0开发，怕是有点麻烦，而有了这俩款前端快捷键工具库，就嫩够快速实现键盘快捷键功能了~

1. Mousetrap

Mousetrap 是一个超级小巧无依赖的库，用于处理Javascript中的键盘快捷键。

无需再编写大量的代码实现快捷键功能，它提供了一种简单的方式来捕获键盘输入，用于创建键盘快捷键等交互式功能。

除了常规单键和按键组合之外，还支持如 Gmail 的键序列等等强大的功能。

如何使用

# 安装 Mousetrap

npm install mousetrap

# 引入
<script src="/path/to/mousetrap.min.js"></script>

import Mousetrap from 'mousetrap';

绑定键盘命令监听键盘事件

# 单键
Mousetrap.bind('/', _focusSearch);

# 按键组合
Mousetrap.bind('ctrl+s', function(e) {
    _saveDraft();
});

# 仿 Gmail 键序列
Mousetrap.bind('g o command+enter', function() { /* do something */ });

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

tinykeys

Tinykeys 是一个在Web应用中设置和管理键盘快捷键轻量级无依赖的JavaScript库，提供了简洁易用的API和大量的事件监听处理。

如何使用

# 安装
npm install tinykeys

# 添加依赖
import tinykeys from 'tinykeys';

# 使用
tinykeys(window, {
  "Shift+D": () => {
    alert("The 'Shift' and 'd' keys were pressed at the same time")
  },
  "y e e t": () => {
    alert("The keys 'y', 'e', 'e', and 't' were pressed in order")
  },
  "$mod+KeyD": event => {
    event.preventDefault()
    alert("Either 'Control+d' or 'Meta+d' were pressed")
  },
})

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2023-07-10，如有侵权请联系 cloudcommunity@tencent.com 删除

工具