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 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
js实现加载更多功能实例
Oct 27 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
vue中路由跳转不计入history的操作
Sep 21 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 飞信好友免费短信API接口开源版
2010/07/22 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
python实现猜数字小游戏
2020/03/24 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
实习自我评价怎么写
2013/12/02 职场文书
决心书标准格式
2014/03/11 职场文书
励志演讲稿范文
2014/04/29 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
十七岁的单车观后感
2015/06/12 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
php png失真的原因及解决办法
2021/10/24 PHP