使用JS监听键盘按下事件(keydown event)


Posted in Javascript onNovember 07, 2019

1、监听全局键盘按下事件,例如监听全局回车事件

$(document).keydown(function(event){
 if(event.keyCode == 13){
  alert('你按下了Enter'); 
 }
});

2、监听某个组件键盘按下事件,例如监听id为btn的button组件的回车按下事件

$("#btn").keydown(function(event){
 if(event.keyCode==13){
  alert('你按下了Enter');      
 }
});

3、如果是要监听组合键,例如监听ctrl+c

$(document).keyup(function(event){
if(event.ctrlKey && event.keyCode==67){


alert('你按下了CTRL+C')

}
});

4、详细keyCode值列表

使用JS监听键盘按下事件(keydown event)

使用JS监听键盘按下事件(keydown event)

使用JS监听键盘按下事件(keydown event)

使用JS监听键盘按下事件(keydown event)

 js keyup、keypress和keydown事件 详解

js keyup、keypress和keydown事件都是有关于键盘的事件

当一个按键被pressed 或released在每一个现代浏览器中,都可能有三种客户端事件。

keydown event
keypress event
keyup event

keydown事件发生在键盘的键被按下的时候,接下来触发keypress事件。 keyup 事件在按键被释放的时候触发。

这三个事件在页面中的使用方法如下例:

<input id="testkeyevent" name="testkeyevent" onKeyUp="keyup()" />
<input id="testkeyevent" name="testkeyevent" onkeypress="keypress()" />
<input id="testkeyevent" name="testkeyevent" onkeydown="keydown()" />

对应的js函数:

function keyup(){ ...}
function keypress(){ ...}
function keydown(){ ...}

注意:

KeyDown触发后,不一定触发KeyUp,当KeyDown 按下后,拖动鼠标,那么将不会触发KeyUp事件。
KeyPress主要用来捕获数字(注意:包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键)
KeyPress 只能捕获单个字符
KeyDown 和KeyUp 可以捕获组合键。
KeyPress 可以捕获单个字符的大小写
KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值,也就是不能判断单个字符的大小写。
KeyPress 不区分小键盘和主键盘的数字字符。
KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。

在使用键盘的时候,通常会使用到CTRL+SHIFT+ALT 类似的组合键功能。对于此,我们如何来判定?

通过KeyUp 事件能够来处理(这里说明一下为什么不用KeyDown,因为在判定KeyDown的时候,CTRL、SHIFT和ALT 属于一直按下状态,然后再加另外一个键是不能准确捕获组合键,所以使用KeyDown 是不能准确判断出的,要通过KeyUp 事件来判定 )

这里简单的列举出CTRL+其它键的组合判定代码:

private void Form3_KeyUp(object sender, KeyEventArgs e){
if (e.Control){
MessageBox.Show("KeyUp:Ctrl+" + e.KeyValue.ToString());
}
}

捕获PrScrn按键事件

通过一种钩子的方式可以判定PrScrn 按键事件,钩子可以获取任何键盘事件。
以下是一些键盘上的键对应的Code:以下是一些键盘上的键对应的Code:

键盘按键 对应的数码
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
page up 33
Space 32
page down 34
end 35
home 36
arrow left 37
arrow up 38
arrow right 39
arrow down 40
insert 45
delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
left window key 91
right window key 92
select key 93
numpad 0 96
numpad 1 97
numpad 2 98
numpad 3 99
numpad 4 100
numpad 5 101
numpad 6 102
numpad 7 103
numpad 8 104
numpad 9 105
multiply 106
add 107
subtract 109
decimal point 110
divide 111
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121

总结

以上所述是小编给大家介绍的使用JS监听键盘按下事件(keydown event),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js change,propertychange,input事件小议
Dec 20 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
javascript文本模板用法实例
Jul 31 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
vue.js循环radio的实例
Nov 07 #Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 #Javascript
vue遍历对象中的数组取值示例
Nov 07 #Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 #Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 #Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 #Javascript
vue改变循环遍历后的数据实例
Nov 07 #Javascript
You might like
十天学会php之第六天
2006/10/09 PHP
Php图像处理类代码分享
2012/01/19 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
Python科学计算之NumPy入门教程
2017/01/15 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
python文件读取失败怎么处理
2020/06/23 Python
爱心捐款倡议书
2014/04/14 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
关于保护环境的建议书
2014/05/13 职场文书
社团活动总结书
2014/06/27 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
《秋思》教学反思
2016/02/23 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs