用來捕獲鍵盤輸入的keypress.js介紹

cuieney 發布于2019-08-22 10:44 / 556人閱讀

摘要：最簡單的監聽辦法就是使用使用格式如下它有兩個參數，第一個參數是指定的單個按鍵或者組合鍵，第二個參數是一個回調函數，它在每一次用戶按下指定的時被調用。

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云服務器鍵盤輸入循環鍵盤輸入禁止鍵盤輸入模擬輸入鍵盤

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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