使用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 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
javascript回到顶部特效
Jul 30 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
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
天津市收音机工业发展史
2021/03/04 无线电
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
利用PHP动态生成VRML网页
2006/10/09 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
opencv实现图像平移效果
2021/03/24 Python
舞蹈教育学专业推荐信
2013/11/27 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
我的长生果教学反思
2014/04/28 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
环保建议书范文
2015/09/14 职场文书
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技