jquery键盘事件使用介绍


Posted in Javascript onNovember 01, 2011

一、首先需要知道的是:
1、keydown()
keydown事件会在键盘按下时触发.
2、keyup()
keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件
3、keypress()
keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键
二、获得键盘上对应的ascII码:

$(document).keydown(function(event){ 
console.log(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){ 
//do somethings; 
}else if (event.keyCode == 39){ 
//do somethings; 
} 
});

实例研究:
比如:小说网站中常见的按左右键来实现上一篇文章和下一篇文章;按ctrl+回车实现表单提交;google reader和有道阅读中的全快捷键操作...(以此提高用户体验)
如果我们要实现ctrl+Enter就是ctrl+回车提交表单,可以这样:
$(document).keypress(function(e) { 
if (e.ctrlKey && e.which == 13) 
$("form").submit(); 
}) 
//键盘操作 
$(document).keydown(function(event){ 
var e = event || window.event; 
var k = e.keyCode || e.which; 
switch(k) { 
case 37: 
//… 
break; 
case 39: 
//… 
break; 
} 
return false; 
})

更详尽的关于事件的总结和表述:https://3water.com/article/28772.htm

w3school上的jQuery 事件参考手册

学习过程中,应该多思考怎样改善交互性和用户体验。

Javascript 相关文章推荐
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 #Javascript
EasyUI中的tree用法介绍
Nov 01 #Javascript
jQuery代码优化 事件委托篇
Nov 01 #Javascript
jQuery代码优化 遍历篇
Nov 01 #Javascript
jQuery代码优化 选择符篇
Nov 01 #Javascript
jQuery代码优化之基本事件
Nov 01 #Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 #Javascript
You might like
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
PHP7引入的"??"和"?:"的区别讲解
2019/04/08 PHP
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Python requests获取网页常用方法解析
2020/02/20 Python
python切割图片的示例
2020/11/12 Python
美国校园市场:OCM
2017/06/08 全球购物
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
会计专业的自荐信
2013/12/12 职场文书
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
晚宴邀请函范文
2014/01/15 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
安全员岗位职责范本
2015/04/11 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书