jquery快捷动态绑定键盘事件的操作函数代码


Posted in Javascript onOctober 17, 2013
(function($) 
{ 
$.extend({ key_fn:[], //存放绑定的字符对应的函数 
key_code:[], //存放字符 
key_bind:function(ch,callback){ 
var KeyCode = {a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,s:83,t:84,u:85,v:86,w:87,x:88,y:89,z:90}; 
if(KeyCode.hasOwnProperty(ch)){ 
$.key_fn.push(callback); 
$.key_code.push(ch); 
//第一次才需要添加事件 
if($.key_fn.length == 1){ 
$(document).keypress(function(e){ 
var e = event || window.event; 
var k = e.keyCode || e.which; 
for(var i =0 ; i < $.key_fn.length ;i++){ 
// - 32 兼容小写 
if(k-32 == KeyCode[$.key_code[i]] || k == KeyCode[$.key_code[i]] ){ 
log('pressed binded key '+k); 
$.key_fn[i](); 
break; 
} 
} 
}); 
} 
}else 
{ 
alert('绑定事件只能是字母'); 
} 
} 
}); 
})(jQuery);

使用的时候可以如下
$.key_bind('f',set_table_full_screen); 
$.key_bind('r',reloadthis);

有时候我们需要为应用添加一些快捷方式,每次都去写一个下面的代码,通过key_bin就是方便的绑定某个键盘和和对应的操作函数了。
$(document).keypress(function(){})
Javascript 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
js实现的常用的左侧导航效果
Oct 17 #Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 #Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 #Javascript
JS操作数据库的实例代码
Oct 17 #Javascript
JavaScript调用后台的三种方法实例
Oct 17 #Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 #Javascript
JS实现时间格式化的方式汇总
Oct 16 #Javascript
You might like
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
PHP多例模式介绍
2013/06/24 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
JavaScript实现新年倒计时效果
2018/11/17 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
js实现简单扫雷
2020/11/27 Javascript
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python 常用string函数详解
2016/05/30 Python
python如何查看系统网络流量的信息
2016/09/12 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
详解python中eval函数的作用
2019/10/22 Python
浅析Python 多行匹配模式
2020/07/24 Python
python中Django文件上传方法详解
2020/08/05 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
JPA面试常见问题
2016/11/14 面试题
领导班子对照检查材料
2014/09/22 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
Echarts如何重新渲染实例详解
2022/05/30 Javascript