上班浏览 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