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 相关文章推荐
js异步加载的三种解决方案
Mar 04 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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
PHP常见数组函数用法小结
2016/03/21 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
爬山算法简介和Python实现实例
2014/04/26 Python
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
详解python中__name__的意义以及作用
2019/08/07 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
如何理解Python中包的引入
2020/05/29 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
护士自我鉴定范文
2013/10/06 职场文书
安全员岗位职责
2013/11/11 职场文书
前台文员的岗位职责
2013/11/14 职场文书
模范家庭事迹材料
2014/02/10 职场文书
保密工作实施方案
2014/02/24 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
python - timeit 时间模块
2021/04/06 Python
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android