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 相关文章推荐
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
vue el-table实现行内编辑功能
Dec 11 Javascript
利用 JavaScript 构建命令行应用
Nov 17 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
AngularJS语法详解
2015/01/23 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Django卸载之后重新安装的方法
2017/03/15 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
详解python中list的使用
2019/03/15 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
Aosom西班牙:家具在线商店
2020/06/11 全球购物
万年牢教学反思
2014/02/15 职场文书
上课打牌的检讨书
2014/02/15 职场文书
慈善晚会策划方案
2014/05/14 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
在校学生证明格式
2015/06/24 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python