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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 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的网址
2006/11/25 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
layui实现数据分页功能
2019/07/27 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
python动态进度条的实现代码
2019/07/03 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
华为慧通笔试题
2016/04/22 面试题
办公室年终个人自我评价
2013/10/28 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
自荐书范文范例
2014/02/13 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
关于mysql中string和number的转换问题
2022/06/14 MySQL
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL