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的闭包
Dec 31 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 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
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
php目录拷贝实现方法
2015/07/10 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
JS实现文字掉落效果的方法
2015/05/06 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
js实现简单计算器
2015/11/22 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Python中os.path用法分析
2015/01/15 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
PHP面试题及答案一
2012/06/18 面试题
UNIX文件类型
2013/08/29 面试题
公司新员工的演讲稿注意事项
2014/01/01 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server