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 相关文章推荐
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
AngularJS实现表单验证
Jan 28 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
Python打包可执行文件的方法详解
2016/09/19 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
在Python中使用Neo4j的方法
2019/03/14 Python
python打开windows应用程序的实例
2019/06/28 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
python关闭占用端口方式
2019/12/17 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
迎接领导欢迎词
2014/01/11 职场文书
单位成立周年感言
2014/01/26 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
公司委托书格式
2014/08/01 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
发票退票证明
2015/06/24 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python