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 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 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不用正则采集速度探究总结
2008/03/24 PHP
解析php入库和出库
2013/06/25 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
python中随机函数random用法实例
2015/04/30 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
详解Django中间件执行顺序
2018/07/16 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
公司出纳岗位职责
2013/12/07 职场文书
生物科学系大学生的自我评价
2013/12/20 职场文书
求职信需要的五点内容
2014/02/01 职场文书
优秀广告词大全
2014/03/19 职场文书
学校安全责任书范本
2014/07/23 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
检察院起诉书
2015/05/20 职场文书
python程序的组织结构详解
2021/12/06 Python