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 相关文章推荐
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
PHP个人网站架设连环讲(三)
2006/10/09 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
python脚本监控docker容器
2016/04/27 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
简单了解django索引的相关知识
2019/07/17 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
python实现自动打卡的示例代码
2020/10/10 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
营业员个人总结的自我评价
2013/10/25 职场文书
生产管理的三大手法
2013/11/11 职场文书
员工安全生产承诺书
2014/05/22 职场文书
美食节策划方案
2014/05/26 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
学习普通话的体会
2014/11/07 职场文书
2014年维修工作总结
2014/11/22 职场文书
人事任命通知书
2015/04/21 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python