Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jQuery 前的按键判断代码

jQuery 前的按键判断代码

发布时间:2013-08-24   编辑:www.jquerycn.cn
刚看到个问题,如何得知同时按下了哪几个键以及按键顺序(难道是格斗游戏的组合键?),其实jQuery实现起来是很简单的。
刚看到个问题,如何得知同时按下了哪几个键以及按键顺序(难道是格斗游戏的组合键?),其实jquery实现起来是很简单的。 做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>

您可能感兴趣的文章:
jQuery 前的按键判断代码
jQuery实现当按下回车键时绑定点击事件
jquery键盘事件介绍
jQuery回车键事件实例代码
jQuery回车键绑定点击事件示例
jquery键盘事件使用介绍
读jQuery之七 判断点击了鼠标哪个键的代码
jquery事件机制扩展插件 jquery鼠标右键事件
jquery事件机制扩展插件 jquery鼠标右键事件。
jquery为页面增加快捷键示例

[关闭]