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脚本
Aug 04 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 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 文章采集正则代码
2009/12/28 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
Python容器类型公共方法总结
2020/08/19 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
Python中如何定义一个函数
2016/09/06 面试题
2014年业务工作总结
2014/11/17 职场文书
先进个人推荐材料
2014/12/29 职场文书
培训班开班主持词
2015/07/02 职场文书
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技