成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

cuieney / 608人閱讀

摘要:最簡單的監(jiān)聽辦法就是使用使用格式如下它有兩個參數(shù),第一個參數(shù)是指定的單個按鍵或者組合鍵,第二個參數(shù)是一個回調(diào)函數(shù),它在每一次用戶按下指定的時被調(diào)用。

keypress.js是一個捕獲鍵盤輸入的JavaScript庫,它簡單易用,輕量級的壓縮版本只有9kB左右,并且沒有依賴其他JavaScript庫。

我們通常用鍵盤事件來監(jiān)聽keydown和keyup事件。當按下鍵盤的任意鍵的時候,keydown事件被觸發(fā),放開該鍵時keyup事件被觸發(fā)。但有一些特殊位置的鍵盤符無法自動觸發(fā)keyup事件,這時需要我們手動監(jiān)聽該事件。所以,就有了keypress.js用來監(jiān)聽鍵盤事件。

keypress.js的github地址以及項目主頁。

keypress.js的使用

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

然后,實例化一個監(jiān)聽器:

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

接著,就可以用這個監(jiān)聽器監(jiān)聽鍵盤事件了,我們可以通過調(diào)用keypress.js的API來實現(xiàn)對鍵盤事件的監(jiān)聽。下面就介紹一下keypress.js都有哪些API。

.simple_combo

最簡單的監(jiān)聽辦法就是使用使用simple_combo API
格式如下:

 `simple_combo(keys, on_keydown_callback)`

它有兩個參數(shù),第一個參數(shù)是指定的單個按鍵或者組合鍵,第二個參數(shù)是一個回調(diào)函數(shù),它在每一次用戶按下指定的keyboard時被調(diào)用。例如:

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

當用戶同時按下"ctrl c"時,函數(shù)才會被調(diào)用。

.counting_combo

用于對組合快捷鍵被按下的次數(shù)進行計數(shù),格式如下:

counting_combo(keys, on_count_callback)

它也有兩個參數(shù),不過第一個參數(shù)是兩個按鍵組合的快捷鍵,比如Ctrl c,Ctrl v等,第二個參數(shù)是一個回調(diào)函數(shù),例如:

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

count實際上是shift一直按著的情況下c被按下的次數(shù)。

.sequence_combo

用于注冊一個序列組合,
格式如下:

sequence_combo(keys, callback)

它也有兩個參數(shù),第一個參數(shù)是用于描述的按鍵序列,另一個參數(shù)是一個回調(diào)函數(shù),當按鍵序列的按鍵都被按下時,這個函數(shù)才會被調(diào)用。
例如:

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)

它提供了許多可選的參數(shù),下面是這些可選的參數(shù)以及它們的默認設(shè)置:

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

如果一次要注冊多個組合,為了方便描述這些組合對象,可以將它們?nèi)糠诺揭粋€數(shù)組中,格式如下:

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)

例如注銷所有的已經(jīng)注冊的shift s組合:

listener.unregister_combo("shift s"); 
.unregister_many

格式如下:

unregister_many(array_of_keys_or_combo_dictionaries)

用于注銷大量的組合,從按鍵組成的數(shù)組中或者組合字典中注銷,例如:

listener.unregister_many(my_registered_combos);
.get_registered_combos()

用于獲得監(jiān)聽中所有注冊的組合。

listener.get_registered_combos()
.reset()

重置,用于清空所有注冊的組合。

`listener.reset()`
.stop_listening()

停止監(jiān)聽,直到listen()再次被喚醒。
例如當我們在輸入一個字段或者文本時就可以這樣用:

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

用于監(jiān)聽結(jié)束后,摧毀此次監(jiān)聽的所有記錄。

listener.destroy();

有不對的地方,還請多多指教~~

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/91158.html

相關(guān)文章

  • DOM 事件深入淺出(一)

    摘要:本文就將帶大家深入淺出地了解事件的那些屬性和方法。針對不同級別的,我們的事件處理方式也是不一樣的。當然其優(yōu)點是不需要操作來完成事件的綁定。文章地址事件深入淺出二。 在項目開發(fā)時,我們時常需要考慮用戶在使用產(chǎn)品時產(chǎn)生的各種各樣的交互事件,比如鼠標點擊事件、敲擊鍵盤事件等。這樣的事件行為都是前端DOM事件的組成部分,不同的DOM事件會有不同的觸發(fā)條件和觸發(fā)效果。本文就將帶大家深入淺出地了解...

    macg0406 評論0 收藏0
  • 【重溫基礎(chǔ)】20.事件

    摘要:本文是重溫基礎(chǔ)系列文章的第二十篇。事件捕獲為截獲事件提供機會,然后實際的目標接收到事件,最后事件冒泡,對事件作出響應(yīng)。事件處理事件處理,即響應(yīng)某個事件。包括導致事件的元素事件類型等其他信息。 本文是 重溫基礎(chǔ) 系列文章的第二十篇。 這是第三個基礎(chǔ)系列的第一篇,歡迎持續(xù)關(guān)注呀! 重溫基礎(chǔ) 系列的【初級】和【中級】的文章,已經(jīng)統(tǒng)一整理到我的【Cute-JavaScript】的Java...

    Blackjun 評論0 收藏0
  • angularjs學習筆記—事件指令

    摘要:適用標簽所有觸發(fā)條件單擊適用標簽所有觸發(fā)條件雙擊適用標簽觸發(fā)條件失去焦點適用標簽觸發(fā)條件獲取焦點適用標簽觸發(fā)條件更新輸入框的內(nèi)容改變并不代表的值更新。如果按一個鍵很久才松開,發(fā)生的事件為。 ngClick 適用標簽:所有觸發(fā)條件:單擊 #html click me click me #script angular.module(learnModule, []) ...

    Lemon_95 評論0 收藏0
  • jQuery 事件(一) 鼠標與鍵盤事件

    jQuery 鼠標事件 click與dbclick事件 用交互操作中,最簡單直接的操作就是點擊操作。jQuery提供了兩個方法一個是click方法用于監(jiān)聽用戶單擊操作,另一個方法是dbclick方法用于監(jiān)聽用戶雙擊操作。這兩個方法的用法是類似的,下面以click()事件為例 方法一:$ele.click() 綁定$ele元素,不帶任何參數(shù)一般是用來指定觸發(fā)一個事件,用的比較少 點擊觸發(fā) $(ele...

    Gemini 評論0 收藏0
  • js高級程序設(shè)計-事件處理-閱讀筆記

    摘要:事件流事件流是指從頁面接受事件的順序一般考慮兼容性問題會使用冒泡而不適用捕獲事件冒泡事件開始時由具體的元素嵌套層次最深的元素接受然后逐級向上傳播到文檔事件捕獲基本跟事件冒泡相反事件捕獲用于在于事件到達預(yù)定目標之前捕獲他首先接收到事件然后事件 事件流 事件流是指從頁面接受事件的順序showImg(https://segmentfault.com/img/bVIf9T?w=540&h=48...

    Anshiii 評論0 收藏0

發(fā)表評論

0條評論

cuieney

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<