用来捕获键盘输入的keypress.js介绍

keypress.js是一个捕获键盘输入的JavaScript库,它简单易用,轻量级的压缩版本只有9kB左右,并且没有依赖其他JavaScript库。

我们通常用键盘事件来监听keydown和keyup事件。当按下键盘的任意键的时候,keydown事件被触发,放开该键时keyup事件被触发。但有一些特殊位置的键盘符无法自动触发keyup事件,这时需要我们手动监听该事件。所以,就有了keypress.js用来监听键盘事件。

keypress.js的github地址以及项目主页

keypress.js的使用

首先在html页面中引入impress.js文件:

<script type="text/javascript" src="keypress.js"></script>

然后,实例化一个监听器:

var listener = new window.keypress.Listener();

接着,就可以用这个监听器监听键盘事件了,我们可以通过调用keypress.js的API来实现对键盘事件的监听。下面就介绍一下keypress.js都有哪些API。

.simple_combo

最简单的监听办法就是使用使用simple_combo API
格式如下:

 `simple_combo(keys, on_keydown_callback)`

它有两个参数,第一个参数是指定的单个按键或者组合键,第二个参数是一个回调函数,它在每一次用户按下指定的keyboard时被调用。例如:

listener.simple_combo("ctrl c", function() {
        console.log("You pressed ctrl c");
    });

当用户同时按下”ctrl c”时,函数才会被调用。

.counting_combo

用于对组合快捷键被按下的次数进行计数,格式如下:

counting_combo(keys, on_count_callback)

它也有两个参数,不过第一个参数是两个按键组合的快捷键,比如Ctrl c,Ctrl v等,第二个参数是一个回调函数,例如:

listener.counting_combo("shift s", function(e, count) {
console.log("You've pressed this " + count + " times.");});

count实际上是shift一直按着的情况下c被按下的次数。

.sequence_combo

用于注册一个序列组合,
格式如下:

sequence_combo(keys, callback)

它也有两个参数,第一个参数是用于描述的按键序列,另一个参数是一个回调函数,当按键序列的按键都被按下时,这个函数才会被调用。
例如:

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

.register_combo

如果想要使用有更高级的功能keypress事件,就可以使用.register_combo API,格式如下:

register_combo(combo_dictionary)

它提供了许多可选的参数,下面是这些可选的参数以及它们的默认设置:

listener.register_combo({
    "keys"              : null,
    "on_keydown"        : null,
    "on_keyup"          : null,
    "on_release"        : null,
    "this"              : undefined,
    "prevent_default"   : false,
    "prevent_repeat"    : false,
    "is_unordered"      : false,
    "is_counting"       : false,
    "is_exclusive"      : false,
    "is_solitary"       : false,
    "is_sequence"       : false
});

.register_many

如果一次要注册多个组合,为了方便描述这些组合对象,可以将它们全部放到一个数组中,格式如下:

register_many(combo_dictionary_array)

例如:

var my_scope = this;
var my_combos = listener.register_many([
    {
        "keys"          : "shift s",
        "is_exclusive"  : true,
        "on_keydown"    : function() {
            console.log("You pressed shift and s together.");
        },
        "on_keyup"      : function(e) {
            console.log("And now you've released one of the keys.");
        },
        "this"          : my_scope
    },
    {
        "keys"          : "s",
        "is_exclusive"  : true,
        "on_keyup"      : function(event) {
            // Normally because we have a keyup event handler,
            // event.preventDefault() would automatically be called.
            // But because we're returning true in this handler,
            // event.preventDefault() will not be called.
            return true
        },
        "this"          : my_scope
    }
]);

.unregister_combo

用于注销所有的连击或者指定按键组合,其格式如下:

unregister_combo(keys_or_combo_dictionary)

例如注销所有的已经注册的shift s组合:

listener.unregister_combo("shift s"); 

.unregister_many

格式如下:

unregister_many(array_of_keys_or_combo_dictionaries)

用于注销大量的组合,从按键组成的数组中或者组合字典中注销,例如:

listener.unregister_many(my_registered_combos);

.get_registered_combos()

用于获得监听中所有注册的组合。

listener.get_registered_combos()

.reset()

重置,用于清空所有注册的组合。

`listener.reset()`

.stop_listening()

停止监听,直到listen()再次被唤醒。
例如当我们在输入一个字段或者文本时就可以这样用:

$('input[type=text]')
    .bind("focus", function() { listener.stop_listening(); })
    .bind("blur", function() { listener.listen(); });

.destroy()

用于监听结束后,摧毁此次监听的所有记录。

listener.destroy();

有不对的地方,还请多多指教~~

    原文作者:readyGo
    原文地址: https://segmentfault.com/a/1190000007627246
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞