20個優秀的JavaScript 鍵盤事件處理庫

lhb25發表於2014-04-10

  鍵盤事件是 Web 開發中最常用的事件之一,通過對鍵盤事件的捕獲和處理可以提高網站的易用性和互動體驗。下面,我們向大家介紹收集的20款優秀的 JavaScript 鍵盤事件處理庫,幫助開發人員輕鬆處理各種鍵盤事件,趕緊收藏吧!

  Keypress

  Keypress 是個有著許多特別功能的輸入捕捉庫,它非常容易使用,有個極小的指令碼(約9kb),而且沒有任何依賴。這個庫支援所有主流的瀏覽器和作業系統,但是沒在非英文的鍵盤上測試過。

  Mousetrap

  Mousetrap 是個沒有外部依賴的獨立庫,它最小約為 1.9kb,Mousetrap 非常容易擴充套件,只要頁面中包括 Mousetrap 和需要擴充套件的 JavaScript 庫就可以了。

  Mousetrap支援的瀏覽器有: Internet Explorer 6+, Safari, Firefox 和 Chrome。

  jQuery Hotkeys

  jQuery.Hotkeys 允許使用者在原始碼中新增或者刪除各種鍵盤事件,幾乎支援任何組合鍵。只需要一行程式碼就可以繫結或者解綁快捷鍵。支援(Win/Mac/Linux)平臺上 的瀏覽器: IE 6/7/8, FF 1.5/2/3, Opera-9, Safari-3 and Chrome-0.2。

  Keymage

  Keymage 是用 JavaScript 實現的極小的處理快捷鍵繫結的庫,它沒有任何的依賴項,非常容易擴充套件,使用者很容易就能使用它開發一個新的庫。

  KeyboardJS

  KeyboardJS 是個 JavaScript 庫,用來繫結鍵盤組合鍵,不會有任何的鍵盤程式碼和鍵盤組合鍵衝突。它可以作為一個獨立的庫也可以作為一個 AMD 模組。它支援單一快捷鍵或者組合鍵,可以在任何地方使用。

  kbNav

  kbNav 可以很方便的使用鍵盤來進行使用者友好的網站導航。kbNav 快捷鍵會出現在使用者點選的物件中。使用者可以很方便的找到想要使用的快捷鍵。使用者可以使用網站開發一些無意識的快捷鍵和一些行為的關聯,消除記憶快捷鍵和行 為的麻煩。kbNav 只需要點選相應的鍵盤,按 Enter 就可以生效,而且快捷鍵可以包含字每和數字,使用者可以為每個行為都製作相應的快捷鍵。

  Keymaster.js

  Keymaster 是個簡單的微型庫,用來定義和分配 web 應用的各種快捷鍵。Keymaster 沒有任何依賴項,可以完全獨立使用。它支援任何的 JavaScript 庫或者是框架。
Keymaster 可以在任何瀏覽器上定義 keyup 和 keydown 事件的快捷鍵。目前支援的瀏覽器有: IE (6+), Safari, Firefox 和 Chrome。

  Jwerty

  jwerty 是個 JS 庫,允許使用者繫結,啟用和定義相關元素和世間的快捷鍵方式。它一般包括一些極小的標準 API ,非常容易使用和清除。它大小約為 1.5kb ,而且沒有任何依賴項,同時又相容 jQuery,Zepto 或者其他 。

  KeyCode.js

  KeyCode.js 是個跨瀏覽器的 JavaScript 常規鍵盤快捷鍵庫。這個庫圍繞鍵盤物件來執行,還有一些 { Int code, bool shift, bool alt, bool ctrl } JavaScript 物件,記錄使用者按下的鍵盤物件。translate_event() 方法會返回其中一個物件; hot_key() 獲取其中一個然後返回一個符合 JQuery HotKey 外掛或者  Binny V A's shortcut.js 庫的字串。

  Handling Keyboard Shortcuts in JavaScript

  使用這個庫,使用者可以新增鍵盤快捷鍵到 JavaScript 應用中,它支援Mac 的 Meta Key,但是目前只是測試版,需要小心使用。

  keyboard.backbone.js

  keyboard.backbone.js 依賴於 domEvents.backbone.js,domEvents.backbone.js 又依賴於 jQuery 和 Backbone。keyboard.backbone.js 主要是依賴 domEvents 的 keyDown 和 keyUp(也叫做:key:down 和 key:up),所以如果使用者想執行不一樣的 key:press 需要另外一個不同的庫。

  Kibo

  Kibo 是個簡單的 JavaScript 庫,用來處理各種鍵盤事件,沒有任何依賴,而且完全開源。

  JavaScript Shortcuts Library

  這是個令人印象深刻,而且又容易使用的 JavaScript 快捷鍵庫,可以處理各種鍵盤事件。

  User Keyboard Shortcuts

  UserKeyboardShortcuts 是重構了 mootools-more 提供的鍵盤類,提供給使用者本地自定義的鍵盤快捷鍵,不需要使用者做過多的操作。

  使用者只需要用Keyboard.addShortcuts ( Keyboard.Extras提供的 )來改變他們的快捷鍵。UserKeyboardShortcuts 使用 localStorage (對 cookie 失效)來儲存使用者所做的修改,當頁面重新載入的時候恢復原狀。  

  okShortcut

  okShortcut 包括兩個方法: jQuery.shortcut.add 和 jQuery.shortcut.remove ,分別用來新增和刪除快捷鍵繫結。兩者都可以繫結組合鍵和進行回撥。jQuery.shortcut.add 可以選擇接收一個選項 hash。

  jQuery Beeline

  Beeline 是用最直接的方式去繫結快捷鍵,為 Web 應用提供鍵盤導航。它是基於 jQuery Hotkeys.

  jQuery Shortcuts

  jQuery Shortcuts 是個超輕量級的方法,使用 jQuery 來繫結快捷鍵(熱鍵)。

  KEY-BOARD-SHORT-CUTS

  key-board-short-cuts 是用 JavaScript 實現的簡單鍵盤快捷鍵示例,它不是一個複雜的 JavaScript 繫結事件。繫結快捷鍵之後所有的行為都需要開發者自己去自定義。

  jKey

  jKey 是另一個非常有用的 JavaScript 快捷鍵庫,用來處理鍵盤事件。它使用 jQuery,所以可以選擇任何可用的元素來設定快捷鍵命令。基本上,任何元素,比如一個輸入框或者文字框,都會有一款適用的快捷鍵命令。

  Keys.js

  Keys.js 是個卓越的瀏覽器應用快捷鍵繫結工具,它可以使用 localStorage 來進行序列化永續性繫結,或者上傳到伺服器中,對使用者的 Web 應用進行個性化設定。使用相同的 API 就可以很方便的反序列化。

  Key.js 擁有 CommonJS 和 AMD 模組的支援,可以跟 require.js 或者其他模組載入器一起使用,目前支援的瀏覽器有: IE7+, Firefox 21+, Safari 6+ and Chrome 27+。

  欣賞完這麼多方便又驚豔的鍵盤事件處理工具,跟大家分享一下你的感受吧:)

相關文章