❗️你有0条未读消息

分享我收藏的小而美JS库[二] -- KeyPress

17/53,每周一篇博,坚持!

这一篇博文是小而美的库分享第二篇,准备分享一个JS键盘事件捕获的库,名字就叫做KeyPress

关于KeyPress

我们在web开发过程中,为了给用户带来良好的用户体验,通常就不仅仅需要响应用户的鼠标操作,更多的是需要响应用户的键盘操作。通常这时候我们总是需要各种搜索查询键盘上各个按键对应的键码。
这是一个很繁琐而又没什么技术含量的事。而”KeyPress”这个库基本上就让我们摆脱了查询键码的繁琐过程,托管了我们对键盘映射的响应。
“非常容易使用,大小合理(9kb),没有任何依赖,健壮性良好的键盘输入捕获JS库”,这是KeyPress的自我评价。

它能提供的功能特性包括:

  1. 触发按键按下或释放
  2. 任意的按键都可以作为触发按键
  3. 特别地连击计算
  4. 按键序列的组合
  5. 其他的一些特性

什么意思?我们上例子看下

使用方式

  1. 首先需要下载它的库文件:ZIP
  2. 在前端页面中引用该JS库文件
  3. 初始化一个事件监听器

    1
    var listener = new window.keypress.Listener();
  4. 接下来就可以注册相应按键的事件监听了,我们看几个例子,妙就妙在这里
    4.1 简单按键组合

    1
    2
    3
    listener.simple_combo("shift s",function(){
    console.log("You pressed shift and s");
    });

    simple_combo是库函数的API,第一个参数表示监听的是shift键和s键的按下,你可以写一系列的键,以空格分隔,这样是不是就脱离了查询键码组合了,直接识别键名称!
    第二个参数是回调函数,就不多解释了。

    4.2 计数

    1
    2
    3
    listener.counting_combo("tab space",function(e,count){
    console.log("You've pressed this " + count + "times.");
    });

    这段代码调用counting_combo API创建了一个计数器,可以统计tab space键按下的总次数。

    4.3 按键序列
    大家都玩过魂斗罗吧?我们都知道魂斗罗里面有个按键组合,如果正确按下了就会触发30条命。这种功能就可以使用按键序列事件来监听。

    1
    2
    3
    listener.sequence_combo("up up down down left right left right b a enter", function() {
    lives = 30;
    }, true);

    如上的一些已经完全够我们在web开发过程中自由发挥了,毕竟我们在开发过程中大部分都是用来监听用户的按键组合。

    KeyPress还有一些高级用法,这里仅举几个例子说明用法,虽然实际中可能不会存在这样的场景:
    register_combo:使用该API注册一系列事件动作。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    listener.register_combo({
    // 按键组合,空格分隔或者字符数组
    "keys" : null,
    // 按键按下时的回调函数(都针对keys设置的按键组合)
    "on_keydown" : null,
    // 按键释放时的回调函数
    "on_keyup" : null,
    // 等价于回调函数设置event.preventDefault(),而且如果是组合按键的话,针对每个按键都event.preventDefault()了
    "prevent_default" : false,
    ... ...
    });

    这个库最方便的地方便在于不用记忆键码也可以写事件监听,并且支持任意的按键组合,让我们可以专心写事件回调逻辑,按键事件监听的事都交给库来解决。这会很大程度上提高我们编码的效率。

    更详细的用法大家可以查看官方文档。

赞 赏

如果你觉得本文还不错的话也可以赞赏一点~