押したキーボードのコード・文字列を取得する

Key:
keyCode:
String.fromCharCode(keyCode):
Reading:
keyCodeToString:
String.fromCharCode(keyCode):
8	backspace
9	tab
13	enter
16	shift
17	ctrl
18	alt
19	pause/break
20	caps lock
27	escape
29  無変換	
28  変換	
33	page up
34	page down
35	end
36	home
37	left arrow	←
38	up arrow	↑
39	right arrow	→
40	down arrow	↓
45	insert
46	delete
48	0
49	1
50	2
51	3
52	4
53	5
54	6
55	7
56	8
57	9

64  atmark  @ 
65	a
66	b
67	c
68	d
69	e
70	f
71	g
72	h
73	i
74	j
75	k
76	l
77	m
78	n
79	o
80	p
81	q
82	r
83	s
84	t
85	u
86	v
87	w
88	x
89	y
90	z
91	left window key
92	right window key
93	select key
96	numpad 0
97	numpad 1
98	numpad 2
99	numpad 3
100	numpad 4
101	numpad 5
102	numpad 6
103	numpad 7
104	numpad 8
105	numpad 9
106	multiply
107	add
109	subtract
110	decimal point
111	divide
112	f1
113	f2
114	f3
115	f4
116	f5
117	f6
118	f7
119	f8
120	f9
121	f10
122	f11
123	f12
144	num lock
145	scroll lock

160   ^
173   -
186	colon :*
187	semi-colon equal sign ;+
188	comma ,
189	dash  
190	period  .
191	forward slash
192	grave accent
219	open bracket  [
220	back slash  \|
221	close braket  ]
222	single quote  .
240 英数	
242 カタカナ/ひらがな/ローマ字	
243 半角/全角
244 漢字	
view source

JavaScript

var ary = [
  [8,"backspace"," backspace",],
  [9,"tab"," tab",],
  [13,"enter"," enter",],
  [16,"shift"," shift",],
  [17,"ctrl"," ctrl",],
  [18,"alt"," alt",],
  [19,"pause/break"," pause/break",],
  [20,"caps lock"," caps lock",],
  [27,"escape"," escape",],
  [32,"space","",],
  [33,"page up","page up, to avoid displaying alternate character and confusing people",],
  [34,"page down","page down",],
  [35,"end","end",],
  [36,"home","home",],
  [37,"left arrow","left arrow",],
  [38,"up arrow","up arrow",],
  [39,"right arrow","right arrow",],
  [40,"down arrow","down arrow",],
  [45,"insert","insert",],
  [46,"delete","delete",],
  [91,"left window","left window",],
  [92,"right window","right window",],
  [93,"select key","select key",],
  [96,"numpad 0","numpad 0",],
  [97,"numpad 1","numpad 1",],
  [98,"numpad 2","numpad 2",],
  [99,"numpad 3","numpad 3",],
  [100,"numpad 4","numpad 4",],
  [101,"numpad 5","numpad 5",],
  [102,"numpad 6","numpad 6",],
  [103,"numpad 7","numpad 7",],
  [104,"numpad 8","numpad 8",],
  [105,"numpad 9","numpad 9",],
  [106,"multiply","multiply",],
  [107,"add","add",],
  [109,"subtract","subtract",],
  [110,"decimal point","decimal point",],
  [111,"divide","divide",],
  [112,"F1","F1",],
  [113,"F2","F2",],
  [114,"F3","F3",],
  [115,"F4","F4",],
  [116,"F5","F5",],
  [117,"F6","F6",],
  [118,"F7","F7",],
  [119,"F8","F8",],
  [120,"F9","F9",],
  [121,"F10","F10",],
  [122,"F11","F11",],
  [123,"F12","F12",],
  [144,"num lock","num lock",],
  [145,"scroll lock","scroll lock",],
  [186,";","semi-colon",],
  [187,"=","equal-sign",],
  [188,",","comma",],
  [189,"-","dash",],
  [190,".","period",],
  [191,"/","forward slash",],
  [192,"`","grave accent",],
  [219,"[","open bracket",],
  [220,"\\","back slash",],
  [221,"]","close bracket",],
  [222,"'","single quote",],
];

var keyCodeAry = [...Array(222).keys()];
ary.forEach(function(v){
  var hash = {
    keyCode : v[0],
    key  : v[1],
    reading : v[2],
  }
  keyCodeAry[hash.keyCode] = {
    key  : hash.key,
    reading : hash.reading,
  };
});

console.log(keyCodeAry);

function displayKeyCode(evt){
  console.log(event.keyCode);
  var charCode = (evt.which) ? evt.which : event.keyCode;
  var string = String.fromCharCode(charCode);
  var val = String.fromCharCode(charCode);
  if(keyCodeAry[charCode].key){
   val =  keyCodeAry[charCode].key;
  }
  document.getElementById('txtChar').value = val;
  document.getElementById('keyCode').textContent = charCode;
  document.getElementById('string').textContent  = string;
  document.getElementById('reading').textContent = keyCodeAry[charCode].reading;
  return false;
}

document.getElementById('txtChar').addEventListener('keydown', function(e){
  e.preventDefault();
  displayKeyCode(e);
})

document.getElementById('keyCodeToString').addEventListener('change', function(e){
  var val = String.fromCharCode(Number(e.target.value));
  document.getElementById('StringByKeyCode').textContent = val;
})

CSS

input{
  width:50%;
  font-size:8vmin;
}
dd{
  font-size:8vmin;
  min-height:1em;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-keyCode/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。