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 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
js实现上传图片预览方法
Oct 25 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
react-native fetch的具体使用方法
Nov 01 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
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中的时间处理
2006/10/09 PHP
SMARTY学习手记
2007/01/04 PHP
php笔记之:AOP的应用
2013/04/24 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
python中子类调用父类函数的方法示例
2017/08/18 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
python nmap实现端口扫描器教程
2020/05/28 Python
python__name__原理及用法详解
2019/11/02 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
如何客观的进行自我评价
2013/12/17 职场文书
小学语文教学反思
2014/02/10 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
竞聘书格式及范文
2014/03/31 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Python日志模块logging用法
2022/06/05 Python