JSを使用してキーボードプレスイベントをリッスンする

イベントの説明

キーボードを押した後、イベントのすべてのプロパティとメソッドを出力します(ここでは、例として1を押します)。

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

 ここで注意すべきいくつかのプロパティがあります

キー:押されたキーの名前

keyCode:押されたキーのキーコード

altKey、ctrlKey、shiftKey:組み合わせが押されると(ctrl + cなど)、ctrlKeyがtrueになります

1.すべてのキーを表示

(event.keyによって押されたキーの名前を取得します)(event.keyCodeによって押されたキーコードを取得します)

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

いずれかのキーを押した後の効果:

2.Enterプレスイベントを監視します

ここでは、例としてEnterキー(キーコードは13)を取り上げます。さまざまなキーを監視する必要がある場合は、キーコードを変更できます。

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

3.キーの組み合わせを監視します

これは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
73 R 82
アルファキーと数値キーのキーコード値
ボタン キーコード ボタン キーコード
S 83 1 49
T 84 2 50
U 85 3 51
V 86 4 52
W 87 5 53
バツ 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 入る 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
タブ 9 スペースキー 32
クリア 12 ページアップ 33
入る 13 ページダウン 34
シフト 16 終わり 35
コントロール 17 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
收藏 171

おすすめ

転載: blog.csdn.net/qq_59636442/article/details/124000853