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实现twitter puddles算法实例
Dec 06 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 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
建立动态的WML站点(二)
2006/10/09 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
Array对象方法参考
2006/10/03 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
python文件操作整理汇总
2014/10/21 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python2.7实现邮件发送功能
2018/12/12 Python
python协程之动态添加任务的方法
2019/02/19 Python
浅谈django channels 路由误导
2020/05/28 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
大学生开西餐厅创业计划书
2014/02/01 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
六年级学生评语
2014/04/22 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
家属答谢词
2015/01/05 职场文书
js判断两个数组相等的5种方法
2022/05/06 Javascript