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 相关文章推荐
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
清除输入框内的空格
Dec 21 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 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实现长连接的方法与注意事项的问题
2013/05/10 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
Python3 assert断言实现原理解析
2020/03/02 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
心理健康心得体会
2014/01/02 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
工商管理本科生求职信
2014/07/13 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
滞留工资返还协议书
2014/10/19 职场文书
python单元测试之pytest的使用
2021/06/07 Python
Python实现仓库管理系统
2022/05/30 Python