20個優秀的JavaScript 鍵盤事件處理庫
鍵盤事件是 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+。
欣賞完這麼多方便又驚豔的鍵盤事件處理工具,跟大家分享一下你的感受吧:)
相關文章
- 10個用來處理鍵盤事件的JQuery外掛和JS類庫事件jQueryJS
- javascript監聽鍵盤事件JavaScript事件
- JavaScript事件處理JavaScript事件
- 處理鍵盤通知
- ZYKeyboardUtil 全自動處理鍵盤遮擋事件事件
- javaScript事件(二)事件處理程式JavaScript事件
- javascript鍵盤事件程式碼例項JavaScript事件
- javascript基礎(鍵盤事件)(三十八)JavaScript事件
- 10 個優秀的JavaScript開發框架JavaScript框架
- 鍵盤事件事件
- 鍵盤亂鍵怎麼處理 電腦鍵盤按鍵錯亂
- JavaScript之事件處理詳解JavaScript事件
- Qt Creator中滑鼠鍵盤事件的處理實現自定義滑鼠指標QT事件指標
- 20個優秀的前端框架前端框架
- JavaScript 註冊事件處理函式JavaScript事件函式
- 盤點2013:21款最優秀的開源資料庫資料庫
- JavaScript和JQuery的滑鼠mouse事件冒泡處理JavaScriptjQuery事件
- 10款優秀的JavaScript音訊開發庫JavaScript音訊
- 滑鼠、鍵盤事件事件
- js中的鍵盤事件JS事件
- 處理鍵盤輸入訊息(轉)
- 20款最優秀的JavaScript編輯器JavaScript
- 6 款 Javascript 的影像處理庫JavaScript
- 6 款 Javascript 的影象處理庫JavaScript
- [譯] 2018 要學習的優秀 JavaScript 庫與知識JavaScript
- JavaScript 批量註冊事件處理函式JavaScript事件函式
- Keypress - 捕獲鍵盤輸入的JavaScript庫JavaScript
- javascript如何移除註冊的事件處理函式JavaScript事件函式
- 監聽鍵盤事件事件
- WinIO:一個底層的鍵盤事件模擬工具事件
- vue-geventbus – 一個優雅的 Vue 全域性事件處理外掛Vue事件
- vue-geventbus - 一個優雅的 Vue 全域性事件處理外掛Vue事件
- [Ajax]十個優秀的Ajax/Javascript例項網站JavaScript網站
- AngularJs 鍵盤事件和滑鼠事件AngularJS事件
- jQuery 事件(一) 滑鼠與鍵盤事件jQuery事件
- Javascript事件處理程式的5種方式(相容寫法)JavaScript事件
- JavaScript 事件處理函式傳遞引數JavaScript事件函式
- 優秀程式設計師是如何處理糟糕程式碼的程式設計師