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 相关文章推荐
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
js异常捕获方法介绍
Apr 10 Javascript
jsPDF导出pdf示例
May 02 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
js中的面向对象入门
Mar 06 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
vue实现div单选多选功能
Jul 16 Javascript
javascript实现雪花飘落效果
Aug 19 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中shuffle数组值随便排序函数用法
2014/11/21 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
Angular实现响应式表单
2017/08/04 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
python安装Scrapy图文教程
2017/08/14 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python生成大写32位uuid代码
2020/03/03 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
求职意向书
2014/04/01 职场文书
中文专业自荐书
2014/06/29 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript