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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
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
php递归遍历多维数组的方法
2015/04/18 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
python提取页面内url列表的方法
2015/05/25 Python
详解python中的json的基本使用方法
2016/12/21 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
Python中请不要再用re.compile了
2019/06/30 Python
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
初一英语教学反思
2014/01/11 职场文书
实习指导老师评语
2014/04/26 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
社区低保工作总结2015
2015/07/23 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL