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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
简单的分页代码js实现
May 17 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
输入框跟随文字内容适配宽实现示例
Aug 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
PHP 一个随机字符串生成代码
2010/05/26 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
PyQt实现界面翻转切换效果
2018/04/20 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
Pytorch转tflite方式
2020/05/25 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
财务工作疏忽检讨书
2014/09/11 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
社区节水倡议书
2015/04/29 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
python for循环赋值问题
2021/06/03 Python
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript