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 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
微信小程序点击保存图片到本机功能
Dec 13 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开发中常用的字符串操作函数
2011/02/08 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
JavaScript静态的动态
2006/09/18 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
js正则相关知识点专题
2018/05/10 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现把回车符\r\n转换成\n
2015/04/23 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
python文字转语音实现过程解析
2019/11/12 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
计算机专业毕业生求职信分享
2013/12/24 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
战略合作协议书范本
2014/04/18 职场文书
公司捐款倡议书
2014/05/14 职场文书
管理标语大全
2014/06/24 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
幼儿园中班教学反思
2016/03/03 职场文书