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

2023-09-07 08:51:26 浏览数 (1)

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

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

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

1. Mousetrap

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

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

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

如何使用
代码语言:javascript复制
# 安装 Mousetrap

npm install mousetrap
代码语言:javascript复制
# 引入
<script src="/path/to/mousetrap.min.js"></script>

import Mousetrap from 'mousetrap';

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

代码语言:javascript复制
# 单键
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和大量的事件监听处理。

如何使用
代码语言:javascript复制
# 安装
npm install tinykeys
代码语言:javascript复制
# 添加依赖
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

0 人点赞