快捷導(dǎo)航

jQuery 前的按鍵判斷代碼

更新時間：2010年03月19日 11:39:32 作者：

剛看到個問題，如何得知同時按下了哪幾個鍵以及按鍵順序（難道是格斗游戲的組合鍵？），其實(shí)jQuery實(shí)現(xiàn)起來是很簡單的。

做web開發(fā)的時候，有時候需要根據(jù)鍵盤進(jìn)行一些操作，例如按下Enter的時候提交表單，禁止用戶輸入某些特殊字符，設(shè)置快捷鍵等等。這時候需要找出用戶按下的是那些按鍵，寫個小程序來測試按鍵。

$(document).ready(function(){ 
var $down = $("#down"); 
var $press = $("#press"); 
var $up = $("#up"); 
$(document).keydown(function(event){ 
$down.append(String.fromCharCode(event.keyCode) + " "); 
if (event.ctrlKey) { 
alert("ctrl"); 
} 
}).keyup(function(event){ 
$up.append(String.fromCharCode(event.keyCode) + " "); 
}).keypress(function(event){ 
$press.append(String.fromCharCode(event.keyCode) + " "); 
}); 
});

方法是觸發(fā)down時，把keyCode push到數(shù)組里，并刪除重復(fù)元素；觸發(fā)up時，用$.grep從數(shù)組中刪除該keyCode。
在任意時刻，這個數(shù)組里都保存了當(dāng)前所按的按鍵，并且順序是根據(jù)按鍵順序排列的。
用jQuery判斷當(dāng)前所按的按鍵
方法就是用一個外部的數(shù)組保存當(dāng)前按鍵。
在觸發(fā)keydown時，把keyCode push到數(shù)組里，并刪除重復(fù)元素；觸發(fā)keyup時，用$.grep從數(shù)組中刪除該keyCode。

實(shí)現(xiàn)代碼如下：

復(fù)制代碼代碼如下:

當(dāng)前按鍵：<span id="msg"></span> 
<script type="text/javascript"> 
Array.prototype.unique = function () { //這個是刪除重復(fù)元素用的，可惜$.unique只能處理DOM數(shù)組。 
var o = {}; 
for (var i = 0, j = 0; i < this.length; ++i) { 
if (o[this[i]] === undefined) { 
o[this[i]] = j++; 
} 
} 
this.length = 0; 
for (var key in o) { 
this[o[key]] = key; 
} 
return this; 
}; 
var $msg = $('#msg'); 
var keys = []; 
$(document).keydown(function(event){ 
keys.push(event.keyCode); 
keys.unique(); 
$msg.html(keys.join(' ')); 
}).keyup(function(event){ 
keys.push(event.keyCode); 
keys = $.grep(keys, function (n) {return n != event.keyCode;}); 
$msg.html(keys.join(' ')); 
}); 
</script>