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 相关文章推荐
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
详解JavaScript数据类型和判断方法
Sep 04 Javascript
vue 子组件和父组件传值的示例
Sep 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
基于php split()函数的用法详解
2013/06/05 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
公务员职务工作的自我评价
2013/11/01 职场文书
2015党建工作简报
2015/07/21 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
python 批量压缩图片的脚本
2021/06/02 Python
Go Plugins插件的实现方式
2021/08/07 Golang