jQuery 前的按鍵判斷代碼
更新時(shí)間：2010年03月19日 11:39:32 作者：
剛看到個(gè)問(wèn)題，如何得知同時(shí)按下了哪幾個(gè)鍵以及按鍵順序（難道是格斗游戲的組合鍵？），其實(shí)jQuery實(shí)現(xiàn)起來(lái)是很簡(jiǎn)單的。
做web開(kāi)發(fā)的時(shí)候，有時(shí)候需要根據(jù)鍵盤(pán)進(jìn)行一些操作，例如按下Enter的時(shí)候提交表單，禁止用戶輸入某些特殊字符，設(shè)置快捷鍵等等。這時(shí)候需要找出用戶按下的是那些按鍵，寫(xiě)個(gè)小程序來(lái)測(cè)試按鍵。
$(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)代碼如下：
當(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>
復(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>
相關(guān)文章
jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能 jQuery實(shí)現(xiàn)計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能，jQuery實(shí)現(xiàn)計(jì)時(shí)器功能的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
Jquery循環(huán)截取字符串的方法(多出的字符串處理成"...")
下面小編就為大家?guī)?lái)一篇Jquery循環(huán)截取字符串的方法(多出的字符串處理成"...")。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
jquery實(shí)現(xiàn)手風(fēng)琴展開(kāi)效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)手風(fēng)琴展開(kāi)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本文主要介紹了jQuery實(shí)現(xiàn)元素的插入--insertBefore（）和insertAfter（）方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
jquery配合css簡(jiǎn)單實(shí)現(xiàn)返回頂部效果
返回頂部效果想必大家并不陌生吧，其實(shí)實(shí)現(xiàn)方法有很多，在本文為大家介紹下使用jquery是如何輕易實(shí)現(xiàn)的，感興趣的朋友可以參考下2013-09-09
這里所說(shuō)的，用jquery去驗(yàn)證某一組多選至少要有一個(gè)選中，某一組單選至少有一個(gè)選中，，大家都知道單一的一個(gè)用js比較好驗(yàn)證，但是想要用jquery的驗(yàn)證并且用到j(luò)query驗(yàn)證的提示信息，那么這就不好辦了2013-08-08
Expandable "Detail" Table Rows
Expandable "Detail" Table Rows...2007-08-08
通過(guò)jquery-ui中的sortable來(lái)實(shí)現(xiàn)拖拽排序的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇通過(guò)jquery-ui中的sortable來(lái)實(shí)現(xiàn)拖拽排序的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jquery讓返回的內(nèi)容顯示在特定div里(代碼少而精悍)
之前寫(xiě)過(guò)ajax讓返回的內(nèi)容顯示在特定div里最近在看jquery，所以又用jquery重新寫(xiě)了個(gè),需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery自動(dòng)或手動(dòng)圖片切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10