Kibo 用于處理鍵盤(pán)事件的Javascript工具庫(kù)
更新時(shí)間：2011年10月28日 14:53:25 作者：
Kibo是一個(gè)簡(jiǎn)單的用于處理鍵盤(pán)事件的Javascript工具庫(kù)。
入門(mén)
Kibo不依賴任何東西。你只要把它放到你的HTML代碼里就行了：
<script type="text/javascript" src="kibo.js"></script>
下載 kibo.js
創(chuàng)建一個(gè)Kibo對(duì)象實(shí)例，事件監(jiān)聽(tīng)器就建立起來(lái)了：
var k = new Kibo();
Kibo對(duì)象的構(gòu)造器有一個(gè)可選參數(shù)——你指定的接收事件的HTML元素?？梢允莍nput, textarea 或 select，缺省情況下是window.document。
語(yǔ)法和用法
本工具庫(kù)提供了兩個(gè)簡(jiǎn)單的方法——down and up， 它們都接收兩個(gè)參數(shù)：一個(gè)按鍵或多個(gè)按鍵的組合或通配符，以及一個(gè)當(dāng)有匹配的按鍵事件發(fā)生時(shí)調(diào)用的函數(shù)。這兩個(gè)方法都可以鏈?zhǔn)秸{(diào)用。
按鍵組合是指控制鍵和字符鍵的組合，或者簡(jiǎn)單的是一個(gè)或多個(gè)控制鍵。你可以向這兩個(gè)方法傳入單個(gè)或一個(gè)數(shù)組形式的多個(gè)組合鍵。
當(dāng)函數(shù)被調(diào)用時(shí)，事件將被傳入這個(gè)函數(shù)。如果你的事件沒(méi)有什么操作，忽略就行了。如果函數(shù)返回了false，事件的缺省操作將被阻止。
Kibo里提供了一個(gè)lastKey方法，用來(lái)查詢最后一次鍵盤(pán)事件是由什么鍵產(chǎn)生的。它會(huì)返回鍵的名稱，如果在最后的一次按鍵是不支持的鍵，方法將返回undefined。除此之外，你還可以用lastKey判斷是否是某個(gè)特定的功能鍵被按下，它會(huì)要么返回true 要么返回 false。
受支持的按鍵
Kibo 支持下面的這些按鍵，拼寫(xiě)這些按鍵名時(shí)不區(qū)分大小寫(xiě)：
控制鍵 shift, ctrl, alt
字母鍵 從a 到 z
數(shù)字鍵 從0 到 9
功能鍵 從f1 到 f12
方向鍵 left, up, right, down
enter, esc, space, backspace, delete, insert, tab, page_up, page_down, home, end, caps_lock, num_lock
通配符 any, any arrow, any number, any letter, any f
例子
var k = new Kibo();
單鍵或多鍵組合
k.down(['up', 'down'], function() {
console.log('up or down arrow key pressed');
}).up('tab', function() {
console.log('TAB key released');
});
含有控制鍵的組合鍵
function handler() {
console.log('last key: ' + k.lastKey());
}
k.down(['shift q', 'ctrl alt x'], handler);
通配符
k.down(['any letter', 'any number'], function() {
console.log('letter or number key pressed');
console.log('shift key was' + (k.lastKey('shift') ? '' : ' not') + ' pressed');
});
k.up('any', function() {
console.log('key released');
});
阻止缺省事件
k.down('f5', function() { return false; });
License
Kibo is released under the MIT License.
Kibo不依賴任何東西。你只要把它放到你的HTML代碼里就行了：
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="kibo.js"></script>
下載 kibo.js
創(chuàng)建一個(gè)Kibo對(duì)象實(shí)例，事件監(jiān)聽(tīng)器就建立起來(lái)了：
復(fù)制代碼 代碼如下:
var k = new Kibo();
Kibo對(duì)象的構(gòu)造器有一個(gè)可選參數(shù)——你指定的接收事件的HTML元素?？梢允莍nput, textarea 或 select，缺省情況下是window.document。
語(yǔ)法和用法
本工具庫(kù)提供了兩個(gè)簡(jiǎn)單的方法——down and up， 它們都接收兩個(gè)參數(shù)：一個(gè)按鍵或多個(gè)按鍵的組合或通配符，以及一個(gè)當(dāng)有匹配的按鍵事件發(fā)生時(shí)調(diào)用的函數(shù)。這兩個(gè)方法都可以鏈?zhǔn)秸{(diào)用。
按鍵組合是指控制鍵和字符鍵的組合，或者簡(jiǎn)單的是一個(gè)或多個(gè)控制鍵。你可以向這兩個(gè)方法傳入單個(gè)或一個(gè)數(shù)組形式的多個(gè)組合鍵。
當(dāng)函數(shù)被調(diào)用時(shí)，事件將被傳入這個(gè)函數(shù)。如果你的事件沒(méi)有什么操作，忽略就行了。如果函數(shù)返回了false，事件的缺省操作將被阻止。
Kibo里提供了一個(gè)lastKey方法，用來(lái)查詢最后一次鍵盤(pán)事件是由什么鍵產(chǎn)生的。它會(huì)返回鍵的名稱，如果在最后的一次按鍵是不支持的鍵，方法將返回undefined。除此之外，你還可以用lastKey判斷是否是某個(gè)特定的功能鍵被按下，它會(huì)要么返回true 要么返回 false。
受支持的按鍵
Kibo 支持下面的這些按鍵，拼寫(xiě)這些按鍵名時(shí)不區(qū)分大小寫(xiě)：
控制鍵 shift, ctrl, alt
字母鍵 從a 到 z
數(shù)字鍵 從0 到 9
功能鍵 從f1 到 f12
方向鍵 left, up, right, down
enter, esc, space, backspace, delete, insert, tab, page_up, page_down, home, end, caps_lock, num_lock
通配符 any, any arrow, any number, any letter, any f
例子
var k = new Kibo();
單鍵或多鍵組合
復(fù)制代碼 代碼如下:
k.down(['up', 'down'], function() {
console.log('up or down arrow key pressed');
}).up('tab', function() {
console.log('TAB key released');
});
含有控制鍵的組合鍵
復(fù)制代碼 代碼如下:
function handler() {
console.log('last key: ' + k.lastKey());
}
k.down(['shift q', 'ctrl alt x'], handler);
通配符
復(fù)制代碼 代碼如下:
k.down(['any letter', 'any number'], function() {
console.log('letter or number key pressed');
console.log('shift key was' + (k.lastKey('shift') ? '' : ' not') + ' pressed');
});
k.up('any', function() {
console.log('key released');
});
阻止缺省事件
復(fù)制代碼 代碼如下:
k.down('f5', function() { return false; });
License
Kibo is released under the MIT License.
相關(guān)文章
JS實(shí)現(xiàn)控制表格內(nèi)指定單元格內(nèi)容對(duì)齊的方法
這篇文章主要介紹了JS實(shí)現(xiàn)控制表格內(nèi)指定單元格內(nèi)容對(duì)齊的方法,涉及javascript操作表格單元格內(nèi)容樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JS+CSS實(shí)現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)電子商務(wù)網(wǎng)站導(dǎo)航模板效果代碼,涉及JavaScript結(jié)合css動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
建立完全獨(dú)立的JS對(duì)象...2006-12-12
這篇文章主要介紹了微信小程序日歷彈窗選擇器，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05![[js高手之路]HTML標(biāo)簽解釋成DOM節(jié)點(diǎn)的實(shí)現(xiàn)方法](http://img.jbzj.com/images/xgimg/bcimg4.png)
[js高手之路]HTML標(biāo)簽解釋成DOM節(jié)點(diǎn)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇[js高手之路]HTML標(biāo)簽解釋成DOM節(jié)點(diǎn)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
javascript一個(gè)無(wú)懈可擊的實(shí)例化XMLHttpRequest的方法
由于IE新舊版本以及與其他瀏覽器在ajax技術(shù)上的不同，往往需要對(duì)不同的瀏覽器做不同的處理，除了笨拙的瀏覽器嗅探技術(shù)，大約也就是對(duì)象檢測(cè)技術(shù)可用了。2010-10-10
微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
對(duì)于學(xué)習(xí)JavaScript的初學(xué)者來(lái)說(shuō)，變量提升是繞不過(guò)去的一個(gè)知識(shí)點(diǎn),簡(jiǎn)單來(lái)說(shuō)變量提升就是 JS會(huì)把var變量的聲明自動(dòng)提升到作用域的頂部,這篇文章主要給大家介紹了關(guān)于JavaScript變量提升的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義導(dǎo)航欄（模板化），文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
JavaScript常見(jiàn)JSON操作實(shí)例分析
這篇文章主要介紹了JavaScript常見(jiàn)JSON操作,簡(jiǎn)單描述了json的概念、常見(jiàn)json類型,并結(jié)合實(shí)例形式分析了json的序列化、轉(zhuǎn)換、格式化、解析等相關(guān)操作技巧,需要的朋友可以參考下2018-08-08