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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
JS实现数组去重复值的方法示例
Feb 18 Javascript
常用的js方法合集
Mar 10 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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 array_filter除去数组中的空字符元素
2020/06/21 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
缅怀先烈演讲稿
2014/09/03 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
晶体管单管来复再生式收音机
2021/04/22 无线电
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
PyTorch中permute的使用方法
2022/04/26 Python