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 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 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 错误处理经验分享
2011/10/11 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
asp 的 分词实现代码
2007/05/24 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
社区母亲节活动记录
2014/03/06 职场文书
合伙协议书
2014/04/23 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
幼儿学前班评语
2014/12/29 职场文书
国庆阅兵观后感
2015/06/15 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS