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过滤HTML标签以及空格的思路及代码
May 24 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
jQuery zTree插件使用简单教程
Aug 16 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实现图片添加描边字和马赛克的方法
2014/12/10 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
ie支持function.bind()方法实现代码
2012/12/27 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
python实现telnet客户端的方法
2015/04/15 Python
python字典get()方法用法分析
2015/04/17 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python如何实现异步调用函数执行
2019/07/08 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
自我鉴定书面格式
2014/01/13 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
2016教师国培研修感言
2015/12/08 职场文书
六年级数学教学反思
2016/02/16 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
Python 多线程处理任务实例
2021/11/07 Python