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 相关文章推荐
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
ES6中的Javascript解构的实现
Oct 30 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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP基本语法实例总结
2016/09/09 PHP
超级强大的表单验证
2006/06/26 Javascript
Prototype使用指南之ajax
2007/01/10 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python单例模式实例分析
2015/04/08 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
python实现ping命令小程序
2020/12/28 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
自荐信格式的六要素
2013/09/21 职场文书
销售实习自我鉴定
2013/12/07 职场文书
大学生自我鉴定
2013/12/08 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2015年教师国培感言
2015/08/01 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
python中数组和列表的简单实例
2022/03/25 Python
Linux安装Docker详细教程
2022/07/07 Servers
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL