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 相关文章推荐
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 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中使用PDF文档功能
2006/10/09 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
关于php开启错误提示的总结
2019/09/24 PHP
为数据添加append,remove功能
2006/10/03 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python队列的定义与使用方法示例
2017/06/24 Python
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
外贸业务员求职自荐信分享
2013/09/21 职场文书
装修设计师求职信
2014/02/26 职场文书
高中军训感言800字
2014/03/05 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
校园运动会广播稿
2014/10/06 职场文书
实习生个人总结范文
2015/02/28 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
运动会100米广播稿
2015/08/19 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
Python上下文管理器Content Manager
2021/06/26 Python
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS