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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
javascript中indexOf技术详解
May 07 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 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输出含有“#”字符串的方法
2017/01/18 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
Python入门教程之运算符与控制流
2016/08/17 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Python输入二维数组方法
2018/04/13 Python
PyQT实现多窗口切换
2018/04/20 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
白血病捐款倡议书
2014/05/14 职场文书
物流管理专业推荐信
2014/09/06 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server