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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
jQuery选择器全集详解
Nov 24 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
详解Vue3中对VDOM的改进
Apr 23 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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实现逐行删除文件右侧空格的方法
2015/12/25 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
JQuery开发的数独游戏代码
2010/10/29 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
JSON相关知识汇总
2015/07/03 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
angular动态表单制作
2018/02/23 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python简单实现AES加密和解密
2019/03/28 Python
python支持多线程的爬虫实例
2019/12/21 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
上学迟到的检讨书
2014/01/11 职场文书
致400米运动员广播稿
2014/02/07 职场文书
婚礼司仪主持词
2014/03/14 职场文书
商标侵权律师函
2015/05/27 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
Python入门学习之类的相关知识总结
2021/05/25 Python