jQuery 前的按键判断代码


Posted in Javascript onMarch 19, 2010

做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>
Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
页面中js执行顺序
Nov 09 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
JS中箭头函数与this的写法和理解
Jan 14 Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 #Javascript
JS 有名函数表达式全面解析
Mar 19 #Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 #Javascript
JavaScript 高效运行代码分析
Mar 18 #Javascript
JS setCapture 区域外事件捕捉
Mar 18 #Javascript
小议Javascript中的this指针
Mar 18 #Javascript
jQuery each()方法的使用方法
Mar 18 #Javascript
You might like
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python中的面向对象编程详解(下)
2015/04/13 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
python enumerate函数的使用方法总结
2017/11/15 Python
python 读入多行数据的实例
2018/04/19 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
Python3.9新特性详解
2020/10/10 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
开放系统互连参考模型
2016/06/29 面试题
促销活动策划方案
2014/01/12 职场文书
学期自我评价
2014/01/27 职场文书
职工运动会感言
2014/02/07 职场文书
小学一年级评语大全
2014/04/22 职场文书
社区活动总结报告
2014/05/05 职场文书
文明班级建设方案
2014/05/15 职场文书
违纪检讨书
2015/01/27 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
认识实习感想
2015/08/10 职场文书