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 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
JS 显示当前日期与时间的代码
Mar 24 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
vue如何从接口请求数据
Jun 22 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
javascript实现简易的计算器
Jan 17 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 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实现与ASP Banner组件相似的类
2006/10/09 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
python批量提取word内信息
2015/08/09 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
浅谈Python中的字符串
2020/06/10 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
关于赌博的检讨书
2014/01/08 职场文书
关于工资低的辞职信
2014/01/14 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
人民调解协议书范本
2014/10/11 职场文书
幼师小班个人总结
2015/02/12 职场文书
教师师德表现自我评价
2015/03/05 职场文书
催款函范文
2015/06/24 职场文书
电工生产实习心得体会
2016/01/22 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL