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 相关文章推荐
js如何实现设计模式中的模板方法
Jul 23 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
require.js中的define函数详解
Jul 10 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
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
重置版宣传动画
2020/04/09 魔兽争霸
PHP 正则表达式常用函数
2014/08/17 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
php截取中文字符串函数实例
2015/02/23 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
移动节点的jquery代码
2014/01/13 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
js变量提升深入理解
2016/09/16 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python算法应用实战之队列详解
2017/02/04 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
护理专业大学生自我推荐信
2014/01/25 职场文书