jquery中键盘事件小结


Posted in Javascript onFebruary 24, 2016

一、首先需要知道的是:

1、keydown()
keydown事件会在键盘按下时触发.

2、keyup()
keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件

3、keypress()
keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键

二、获得键盘上对应的ascII码:

$(document).keydown(function(event){ 
alert(event.keyCode); 
});

$tips: 上面例子中,event.keyCode就可以帮助我们获取到我们按下了键盘上的什么按键,他返回的是ascII码,比如说上下左右键,分别是38,40,37,39;

三、实例(当按下键盘上的左右方面键时)

代码如下:

$(document).keydown(function(event){ 
//判断当event.keyCode 为37时(即左方面键),执行函数to_left(); 
//判断当event.keyCode 为39时(即右方面键),执行函数to_right(); 
 if(event.keyCode == 37){ 
    to_left(); 
    }else if (event.keyCode == 39){
    to_right(); 
    } 
    else if (event.keyCode == 38){ 
    to_top(); 
    } 
    else if (event.keyCode == 40){ 
    to_bottom();
    } 
}); 

function to_left(){ $(".abc").css({'left':'-=10'});}

function to_right(){ $(".abc").css({'left':'+=10'});}

function to_top(){$(".abc").css({'top':'-=10'});}

function to_bottom(){$(".abc").css({'top':'+=10'});}
Javascript 相关文章推荐
JS中style属性
Oct 11 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
Mar 31 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
javascript实现九宫格相加数值相等
May 28 #Javascript
Javascript类型转换的规则实例解析
Feb 23 #Javascript
理解Javascript图片预加载
Feb 23 #Javascript
Bootstarp风格的toggle效果分享
Feb 23 #Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 #Javascript
javascript瀑布流式图片懒加载实例
Jun 28 #Javascript
Bootstrap创建可折叠的组件
Feb 23 #Javascript
You might like
php Mysql日期和时间函数集合
2007/11/16 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
js 数组操作代码集锦
2009/04/28 Javascript
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
javascript每日必学之继承
2016/02/23 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
大学生物业管理求职信
2013/10/24 职场文书
女子职高个人自荐书
2014/02/01 职场文书
逃课上网检讨书
2014/02/20 职场文书
委托书样本
2014/04/02 职场文书
工作收入证明模板
2014/10/10 职场文书
兴趣班停课通知
2015/04/24 职场文书
结婚典礼致辞
2015/07/28 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书