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

cuieney 发布于2019-08-22 10:44 / 388人阅读

摘要：最简单的监听办法就是使用使用格式如下它有两个参数，第一个参数是指定的单个按键或者组合键，第二个参数是一个回调函数，它在每一次用户按下指定的时被调用。

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

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

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

keypress.js的使用

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

然后，实例化一个监听器：

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();

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

GPU服务器服务器托管键盘输入循环键盘输入禁止键盘输入模拟输入键盘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91158.html

DOM 事件深入浅出（一）

摘要：本文就将带大家深入浅出地了解事件的那些属性和方法。针对不同级别的，我们的事件处理方式也是不一样的。当然其优点是不需要操作来完成事件的绑定。文章地址事件深入浅出二。在项目开发时，我们时常需要考虑用户在使用产品时产生的各种各样的交互事件，比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。本文就将带大家深入浅出地了解...

macg0406 2019-08-20 11:31 评论0 收藏0
【重温基础】20.事件

摘要：本文是重温基础系列文章的第二十篇。事件捕获为截获事件提供机会，然后实际的目标接收到事件，最后事件冒泡，对事件作出响应。事件处理事件处理，即响应某个事件。包括导致事件的元素事件类型等其他信息。本文是重温基础系列文章的第二十篇。这是第三个基础系列的第一篇，欢迎持续关注呀！重温基础系列的【初级】和【中级】的文章，已经统一整理到我的【Cute-JavaScript】的Java...

Blackjun 2019-08-26 13:28 评论0 收藏0
angularjs学习笔记—事件指令

摘要：适用标签所有触发条件单击适用标签所有触发条件双击适用标签触发条件失去焦点适用标签触发条件获取焦点适用标签触发条件更新输入框的内容改变并不代表的值更新。如果按一个键很久才松开，发生的事件为。 ngClick 适用标签：所有触发条件：单击 #html click me click me #script angular.module(learnModule, []) ...

Lemon_95 2019-08-21 10:28 评论0 收藏0
jQuery 事件(一) 鼠标与键盘事件

jQuery 鼠标事件 click与dbclick事件用交互操作中，最简单直接的操作就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作。这两个方法的用法是类似的，下面以click()事件为例方法一：$ele.click() 绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少点击触发 $(ele...

Gemini 2019-08-21 11:55 评论0 收藏0
js高级程序设计-事件处理-阅读笔记

摘要：事件流事件流是指从页面接受事件的顺序一般考虑兼容性问题会使用冒泡而不适用捕获事件冒泡事件开始时由具体的元素嵌套层次最深的元素接受然后逐级向上传播到文档事件捕获基本跟事件冒泡相反事件捕获用于在于事件到达预定目标之前捕获他首先接收到事件然后事件事件流事件流是指从页面接受事件的顺序showImg(https://segmentfault.com/img/bVIf9T?w=540&h=48...

Anshiii 2019-08-20 13:46 评论0 收藏0