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方法和技巧大全
Dec 27 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
PHP 502bad gateway原因及解决方案
Nov 13 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中strtr字符串替换用法详解
2014/11/26 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
PHP最常用的正则表达式
2017/02/13 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
php依赖注入知识点详解
2019/09/23 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
python实现RSA加密(解密)算法
2016/02/17 Python
python线程、进程和协程详解
2016/07/19 Python
基于python实现简单日历
2018/07/28 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
业务总经理岗位职责
2014/02/03 职场文书
个人自我鉴定总结
2014/03/25 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
副总经理岗位职责
2015/02/02 职场文书
Node.js实现断点续传
2021/06/23 Javascript
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫