jQuery 前的按键判断代码
更新时间：2010年03月19日 11:39:32 作者：
刚看到个问题，如何得知同时按下了哪几个键以及按键顺序（难道是格斗游戏的组合键？），其实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>
复制代码 代码如下:
$(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插件leanModal建立一个常规模态窗口2013-08-08
下面小编就为大家带来一篇jQuery原理系列-常用Dom操作详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了jQuery中的pushStack实现原理和应用实例,pushStack是jQuery内核中一个非常重要的函数,许多jQuery内部函数中都频繁用到它,掌握这个函数,有利于理解jQuery的运行原理,需要的朋友可以参考下2015-02-02
Ajax一个向后端发送请求的方式,下面这篇文章主要给大家介绍了关于jQuery发送Ajax请求的几种方法,文中通过实例代码介绍的非常详细,对大家学习或者使用jQuery具有一定的参考学习价值,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了jQuery中val()方法用法,以实例形式分析了val()方法的两种常见用法,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了jquery使用animate方法实现控制元素移动,涉及jQuery中animate方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
JQuery日历插件My97DatePicker日期范围限制
这篇文章主要介绍了JQuery日历插件My97DatePicker日期范围限制的相关资料,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了jQuery动态生成bootstrap表格的相关资料,非常不错具有一定的参考借鉴价值，需要的朋友可以参考下2016-11-11
jQuery中document与window以及load与ready 区别详解
这篇文章主要介绍了jQuery中document与window以及load与ready 区别详解,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JQuery的加载和选择器用法,结合简单实例形式分析了jQuery的功能、加载、选择器的相关使用技巧,需要的朋友可以参考下2019-05-05
最新评论