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 相关文章推荐
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
再谈JavaScript线程
Jul 10 Javascript
vue-hook-form使用详解
Apr 07 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
js中事件对象和事件委托的介绍
Jan 21 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
如何在postman测试用例中实现断言过程解析
Jul 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的日期与时间函数技巧
2008/04/24 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
python 正确保留多位小数的实例
2018/07/16 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
Python csv模块使用方法代码实例
2019/08/29 Python
python中pivot()函数基础知识点
2021/01/03 Python
CSMA/CD介质访问控制协议
2015/11/17 面试题
中英双版中文教师求职信
2013/10/27 职场文书
个人简历自我评价八例
2013/10/31 职场文书
九年级物理教学反思
2014/01/29 职场文书
老公保证书范文
2014/04/29 职场文书
优质服务口号
2014/06/11 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
民主生活会汇报材料
2014/12/15 职场文书
php双向队列实例讲解
2021/11/17 PHP