快捷導(dǎo)航

jQuery 前的按鍵判斷代碼

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

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

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

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

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

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

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

當(dāng)前按鍵：<span id="msg"></span> 
<script type="text/javascript"> 
Array.prototype.unique = function () { //這個(gè)是刪除重復(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>