js监听键盘事件

本文介绍了如何使用JavaScript监听键盘事件,包括全局键盘事件、特定组件键盘事件及组合键事件的监听方法。并详细解释了keydown、keypress和keyup的区别,以及如何在实际应用中选择合适的事件类型。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、 监听全局键盘按下事件,例如监听全局回车事件
 (document).keydown(function(event)    if(event.keyCode==13)      alert(Enter);      );button(document).keydown(function(event)    if(event.keyCode==13)      alert(‘你按下了Enter′);      );二、监听某个组件键盘按下事件:如button按钮(“#butn”).keydown(function(e){
if(e.keyCode==13){
alert(1231);
}
});
三、监听组合键
$(document).keydown(function(e){
if(e.keyCode==65&&e.shiftKey){
alert(9999);
}
});
四、监听键盘按下事件:
1、keydown:用户在键盘上按下某按键是发生。一直按着某按键则会不断触发
2、keypress:用户按下一个按键,并产生一个字符时发生(也就是不管类似shift、 alt、ctrl之类的键,就是说用户按了一个能在屏幕上输出字符的按键keypress事件才会触发)。一直按着某按键则会不断触发。
3、keyup:用户释放某一个按键是触发

在所有浏览器中 onkeypress 事件不是适用于所有按键(如: ALT, CTRL, SHIFT, ESC)。监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件。

五、对应的on家族:onkeyup 、onkeydown、onkeypress
keyup方法等和onkeyup事件的相同和区别:
1.相同:执行的效果的都是一样的
2.区别:keyup()只是一个获取onkeyup事件的方法 ;onkeyup才是一个事件
事件是你通过某种动作触发的,比如单击、双击、鼠标划过等等。。。
方法是代表它对一个事情的处理,比如show(),我可以在触发单击事件的时候调用show(),也可以在双击的时候调用

addEventListener给一个事件注册多个监听器
element.addEventListener(, , );
element.removeEventListener(, , );
字母和数字键的键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57

数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
0 96 8 104 F1 112 F7 118
1 97 9 105 F2 113 F8 119
2 98 * 106 F3 114 F9 120
3 99 + 107 F4 115 F10 121
4 100 Enter 108 F5 116 F11 122
5 101 - 109 F6 117 F12 123
6 102 . 110        
7 103 / 111        

控制键键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
BackSpace 8 Esc 27 Right Arrow 39 -_ 189
Tab 9 Spacebar 32 Dw Arrow 40 .> 190
Clear 12 Page Up 33 Insert 45 /? 191
Enter 13 Page Down 34 Delete 46 `~ 192
Shift 16 End 35 Num Lock 144 [{ 219
Control 17 Home 36 ;: 186 | 220
Alt 18 Left Arrow 37 =+ 187 ]} 221
Cape Lock 20 Up Arrow 38 ,< 188 ‘” 222

多媒体键码值(keyCode)
按键 键码 按键 键码 按键 键码 按键 键码
音量加 175            
音量减 174            
停止 179            
静音 173            
浏览器 172            
邮件 180            
搜索 170            
收藏 171

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值