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学习笔记-详解in运算符
Sep 13 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
js中this用法实例详解
May 05 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 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/12/04 PHP
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
PHP自定义错误用法示例
2016/09/28 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
Djang中静态文件配置方法
2015/07/30 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
python判断正负数方式
2020/06/03 Python
Python无损压缩图片的示例代码
2020/08/06 Python
好的自荐信的要求
2013/10/30 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
老公爱的承诺书
2014/03/31 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
中文专业自荐书
2014/06/29 职场文书
共青团员自我评价
2015/03/10 职场文书
师德师风培训感言
2015/08/03 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js