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 Array对象入门分析
Oct 30 Javascript
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
深入理解Promise.all
Aug 08 Javascript
小程序实现搜索框功能
Mar 26 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
原生JS实现天气预报
Jun 16 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不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python实现中文输出的两种方法
2015/05/09 Python
python字典基本操作实例分析
2015/07/11 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
python如何控制进程或者线程的个数
2020/10/16 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
拉丁舞学习者的自我评价
2013/10/27 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
活动总结怎么写
2014/04/28 职场文书
初中班级口号
2014/06/09 职场文书
劳动竞赛口号
2014/06/16 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
SQL Server实现分页方法介绍
2022/03/16 SQL Server
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android