使用JS监听键盘按下事件

事件说明

我们将键盘按下后事件的所有属性和方法打印出来(这里以按下1为例)

document.onkeydown = function(event){
				console.log(event);
			}

这里面有几个需要注意的属性

key:按下按键的名称

keyCode:按下按键的键码

altKey、ctrlKey、shiftKey:当组合按下(如ctrl+c)时,ctrlKey会变为true

一、查看所有键

(获取event.key 按下的按键名称)(获取event.keyCode 按下的键码)

document.onkeydown = function(event){
				console.log("按下:"+event.key+"键:"+event.keyCode);
			}

按下任意按键后的效果:

二、监听回车按下事件

这里以回车键(键码为13)为例 ,如果需要监听不同的按键,修改键码即可

document.onkeydown = function(event){
				if(event.keyCode==13){
					// 事件
					console.log("按下了回车键")
				}
			}

三、监听组合键

这里以CTRL+A为例

altKey:按下Alt+*组合键时为true

ctrlKey:按下Ctrl+*组合键时为true

shiftKey:按下Shift+*组合键时为true

document.onkeydown = function(event){
				if(event.ctrlKey & event.keyCode == 65){
					console.log("按下了CTRL+A")
				}
			}

4、详细的键码值列表

字母和数字键的键码值 按键 键码 按键 键码 A 65 J 74 B 66 K 75 C 67 L 76 D 68 M 77 E 69 N 78 F 70 O 79 G 71 P 80 H 72 Q 81 I 73 R 82
字母和数字键的键码值 按键 键码 按键 键码 S 83 1 49 T 84 2 50 U 85 3 51 V 86 4 52 W 87 5 53 X 88 6 54 Y 89 7 55 Z 90 8 56 0 48 9 57
数字键盘上的键的键码值 按键 键码 按键 键码 0 96 8 104 1 97 9 105 2 98 * 106 3 99 + 107 4 100 Enter 108 5 101 - 109 6 102 . 110 7 103 / 111
功能键键码值 按键 键码 按键 键码 F1 112 F7 118 F2 113 F8 119 F3 114 F9 120 F4 115 F10 121 F5 116 F11 122 F6 117 F12 123
控制键键码值 按键 键码 按键 键码 BackSpace 8 Esc 27 Tab 9 Spacebar 32 Clear 12 Page Up 33 Enter 13 Page Down 34 Shift 16 End 35 Control 17 Home 36 Alt 18 Left Arrow 37 Cape Lock 20 Up Arrow 38
控制键键码值 按键 键码 按键 键码 Right Arrow 39 -_ 189 Dw Arrow 40 .> 190 Insert 45 /? 191 Delete 46 `~ 192 Num Lock 144 [{ 219 ;: 186 | 220 =+ 187 ]} 221 ,< 188 " 222
多媒体键码值 按键 键码 按键 键码 音量加 175 音量减 174 停止 179 静音 173 浏览器 172 邮件 180 搜索 170
经验分享 程序员 微信小程序 职场和发展