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 相关文章推荐
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
js验证是否为数字的总结
Apr 14 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
JS定义类的六种方式详解
May 12 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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开发中常用的字符串操作函数
2011/02/08 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python实现淘宝购物系统
2019/10/25 Python
百日安全生产活动总结
2014/07/05 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
小兵张嘎观后感
2015/06/03 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers