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 面向对象 继承
May 13 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
浅谈js中的this问题
Aug 31 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 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
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
浅谈javascript的调试
2015/01/28 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
python验证码识别的示例代码
2017/09/21 Python
python实现类之间的方法互相调用
2018/04/29 Python
对pandas中to_dict的用法详解
2018/06/05 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
毕业实习个人鉴定范文
2013/12/10 职场文书
幼儿教师思想汇报
2014/01/10 职场文书
同学聚会策划方案
2014/06/06 职场文书
六查六看剖析材料
2014/10/06 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python