jQuery 前的按鍵判斷代碼
2024-05-06 14:10:55
供稿：網友
做web開發的時候，有時候需要根據鍵盤進行一些操作，例如按下Enter的時候提交表單，禁止用戶輸入某些特殊字符，設置快捷鍵等等。這時候需要找出用戶按下的是那些按鍵，寫個小程序來測試按鍵。
代碼如下:
$(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) + " ");
});
});
方法是觸發down時，把keyCode push到數組里，并刪除重復元素；觸發up時，用$.grep從數組中刪除該keyCode。
在任意時刻，這個數組里都保存了當前所按的按鍵，并且順序是根據按鍵順序排列的。
用jQuery判斷當前所按的按鍵
方法就是用一個外部的數組保存當前按鍵。
在觸發keydown時，把keyCode push到數組里，并刪除重復元素；觸發keyup時，用$.grep從數組中刪除該keyCode。
實現代碼如下：
代碼如下:
當前按鍵：<span id="msg"></span>
<script type="text/javascript">
Array.prototype.unique = function () { //這個是刪除重復元素用的，可惜$.unique只能處理DOM數組。
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>
