jquery键盘事件全记录
很多时候，我们需要获取用户的键盘事件，下面就一起来看看jquery是如何操作键盘事件的。
一、首先需要知道的是：
1、keydown()
keydown事件会在键盘按下时触发.
2、keyup()
keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件
3、keypress()
keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键
二、获得键盘上对应的ascII码：
|
1
2
3
|
$(document).keydown(function(event){
console.log(event.keyCode);
});
|
$tips: 上面例子中,event.keyCode就可以帮助我们获取到我们按下了键盘上的什么按键,他返回的是ascII码,比如说上下左右键,分别是38,40,37,39；
三、实例（当按下键盘上的左右方面键时）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(document).keydown(function(event){
//判断当event.keyCode 为37时（即左方面键），执行函数to_left();
//判断当event.keyCode 为39时（即右方面键），执行函数to_right();
if(event.keyCode == 37){
//do something;
}else if (event.keyCode == 39){
//do something;
}
});
|
实例研究：
比如：小说网站中常见的按左右键来实现上一篇文章和下一篇文章；按ctrl+回车实现表单提交；google reader和有道阅读中的全快捷键操作...（以此提高用户体验）
① 实现ctrl+Enter就是ctrl+回车提交表单：
|
1
2
3
4
5
6
7
|
$(document).keypress(function(event) {
if (event.ctrlKey && event.which == 13)
$("form:first").trigger("submit");
})
|
② 监测ctrl按键：
|
1
2
3
4
5
6
7
8
9
|
$(document).keydown(function(event){
//（ctrlKey和metaKey等效：都是监测）按下ctrl返回turn，按下非ctrl键返回false；
console.log(event.ctrlKey);
//console.log(event.metaKey);
})
|
③ 键盘系列操作
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
$(document).keydown(function(event){
var e = event || window.event; //作用？？？
var k = e.keyCode || e.which; //获取按键的acdII 码
switch(k) {
case 37:
//…
break;
case 39:
//…
break;
}
return false;
})
|
|
1
2
3
4
5
6
7
8
9
10
11
|
//另外发现一个应用的方法：当页面转载完成的时候，第一个表单元素获得焦点，以便输入
$("input[type=text]:first").trigger("focus");
//当表单没获得焦点，但用户却按下键盘的时候，自动为用户定位焦点到输入框上
$(document).keydown(function(){
$("input[type=text]:first").trigger("focus");
})
|
以上是列出了jquery键盘事件的常用方法，很多时候应该也够用了。
jquery键盘事件全记录相关推荐
- JQuery 键盘事件使用整理
1. Js 键盘事件 1.键盘按下,keydown,在键盘上按下某个键时触发.如果按住某个键,会不断触发该事件 2.键盘松开,keyup,该事件仅在松开键盘时触发一次,不是一个持续的响应状态. 3.字 ...
- jquery 键盘事件
jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: keydown(); keyup(); keypress(); keydown() keydown事件会在键盘按下时触发,可以在绑定的函 ...
- 3-3 编程练习：jQuery键盘事件案例
3-3 编程练习 完善下面的代码,在input框中输入内容的时候同样显示在下面的p标签中 <!DOCTYPE html> <html lang="zh-CN"&g ...
- jquery键盘事件
一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() k ...
- 深入了解jquery中的键盘事件
很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...
- jQuery Mobile事件，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile事件 ...
- jQuery keyup事件
jQuery keyup is one of the keyboard event methods. Other jQuery keyboard event methods are keydown() ...
- jquery按键事件_jQuery按键事件
jquery按键事件 jQuery keypress is one of the keyboard event methods. Other jQuery keyboard event methods ...
- JQuery键盘控制图片
JQuery键盘控制图片 <html><head><meta charset="UTF-8"><title></title&g ...
最新文章
- python编程和c语言编程的区别-通过实例浅析Python对比C语言的编程思想差异
- 斯坦福大学机器学习第十课“应用机器学习的建议(Advice for applying machine learning)”
- python输入水果求个数问题_水果爱好者：用Python解决一个简单的分类问题
- Spark与Flink：对比与分析
- python爬虫登陆网页版腾讯课堂
- Nginx学习笔记（七） 创建子进程
- 机器学习与不确定性_机器学习求职中的不确定性
- 让代码更简洁 和@Autowired说分手， 迎接 @RequiredArgsConstructor注解
- NameError: name 'long' is not defined
- bash ./php-memcache.sh,PHP+shell脚本操作Memcached和Apache Status的实例分享
- mysql.host_mysql启动提示mysql.host 不存在，启动失败的解决方法
- AutoML在推荐系统协同过滤中的探索与发现（附交流视频和PPT下载链接）
- 优秀的应用快速启动工具：start for Mac完美支持m1
- C++ delete释放内存的本质
- 基于tidbV6.0探索tiflash在多标签组合场景下的使用
- Zoom天使投资人Jim Scheinman：Zoom的诞生始末
- 5G通信基础知识学习
- 支持向量机(四)——非线性支持向量机
- 翻译考试用计算机作答,上半年CATTI考试方式还是纸笔，下半年就实行全面机考？真是几家欢喜几家愁！...
- 【十年磨一剑】我们能从阿里架构师的身上学到什么？