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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 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+DBM的同学录程序(1)
2006/10/09 PHP
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
php学习笔记之 函数声明
2011/06/09 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
js变换显示图片的实例
2013/04/16 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Python pip使用超时问题解决方案
2020/08/03 Python
python批量修改文件名的示例
2020/09/27 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
音乐表演专业毕业生求职信
2013/10/14 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
司法建议书范文
2014/05/13 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
食品安全承诺书范文
2014/08/29 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
酒店员工管理制度
2015/08/05 职场文书