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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
用js简单提供增删改查接口
May 12 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
vue图片上传组件使用详解
Dec 23 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中创建和调用webservice接口示例
2014/07/25 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python导入时小括号大作用
2017/01/10 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
python中的对数log函数表示及用法
2020/12/09 Python
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
进程的查看和调度分别使用什么命令
2013/12/14 面试题
建筑工程管理专业自荐信范文
2013/12/28 职场文书
工地资料员岗位职责
2013/12/31 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书