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中的默认参数详解
Oct 22 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
node.js express框架简介与实现
Jul 23 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
微信小程序实现watch监听
Jun 04 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
JS实现购物车基本功能
Nov 08 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
Javascript hasOwnProperty 方法 & in 关键字
2008/11/26 Javascript
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
javascript 实现map集合
2015/04/03 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
javascript基础知识
2016/06/07 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
transform python环境快速配置方法
2018/09/27 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
phpquery中文手册
2021/03/18 PHP
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
户外宣传策划方案
2014/05/25 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
学生会自荐信
2019/05/16 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android