KeyCodeを使いこなそう！KeyCode一覧

Javascript

2018.05.312023.01.29

KeyCode一覧

今回は、KeyCode一覧とkeydownイベントのDEMOプログラムを作成しました。以下がそのコードとサンプルです。本当にやりたかったことは、ある設置したButtonを押すと、ユーザー側に Control + Shift + space を押させるということがやりたかったのですが、やり方わからず。。。この記事を作成しました！

<script>
$(window).keydown(function (e) {
  if (e.keyCode === 48) {
     $("#keytype").text("0");
     $("#keytype").css("background","purple");
     $(".48").css("background","purple");
     $(".48").css("color","#FFF");
  }
});
</script>

DEMOの使い方は、好きなキーをタイプしてもらって

CODE

一覧の色が変わるというものです。例えば０を押すと…

表の４８と丸の色が一緒になることがわかるかとおもいます。

この４８というものがKeyCodeというもので、Javascript、jQuery等でKey操作を行う時に使う必要な番号になります。0はKeyDownイベントを使っていますが、1はKeyUpイベントを使っています。Downは押した時に色が変わりUpはキーから手を離した時に色がかわると思います。

<script>
$(window).keyup(function (e) {
　　if (e.keyCode === 49) {
　　$("#keytype").text("1");
　　$("#keytype").css("background","darkred");
　　$(".49").css("background","darkred");
　　$(".49").css("color","#FFF");
　　}
});
</script>

ぜひ、DEMOを使ってみてください！

0	1	2	3	4
48	49	50	51	52
5	6	7	8	9
53	54	55	56	57
A	B	C	D	E
65	66	67	68	69
F	G	H	I	J
70	71	72	73	74
K	L	M	N	O
75	76	77	78	79
P	Q	R	S	T
80	81	82	83	84
U	V	W	X	Y
85	86	87	88	89
Z
90

F1	F2	F3	F4	F5
112	113	114	115	116
F6	F7	F8	F9	F10
117	118	119	120	121
F11	F12
122	123

0	1	2	3	4
96	97	98	99	100
5	6	7	8	9
101	102	103	104	105
*	+	–	.	/
106	107	109	110	111

BackSpace	Tab	Enter	Shift	Ctrl
8	9	13	16	17
Alt	PauseBreak	CapsLock	Esc	Space
18	19	20	27	32
PageUp	PageDown	End	Home	←
33	34	35	36	37
↑	→	↓	Insert	Delete
38	39	40	45	46
NumLock	ScrollLock	*:	+;	<,
144	145	186	187	188
=-	>.	?/	`@	{[
189	190	191	192	219
\|\	}]	~^	_\
220	221	222	226