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 相关文章推荐
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
用console.table()调试javascript
Sep 04 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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/19 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
python各种语言间时间的转化实现代码
2016/03/23 Python
Python实现文件复制删除
2016/04/19 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
药品质量检测应届生求职信
2013/11/14 职场文书
办理护照介绍信
2014/01/16 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
给学校的建议书范文
2014/05/15 职场文书
师德师风自查总结
2014/10/14 职场文书