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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
用JS创建一个录屏功能
Nov 11 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实现四舍五入的方法小结
2015/03/03 PHP
php多线程并发实现方法
2016/09/30 PHP
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
django框架自定义用户表操作示例
2018/08/07 Python
python绘制多个曲线的折线图
2020/03/23 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
网站开发实习生的自我评价
2013/12/11 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
教研活动总结
2014/04/28 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
红色电影观后感
2015/06/18 职场文书
详解Redis主从复制实践
2021/05/19 Redis
VUE递归树形实现多级列表
2022/07/15 Vue.js