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

Javascript

  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

一覧の色が変わるというものです。例えば0を押すと…
表の48と丸の色が一緒になることがわかるかとおもいます。
この48というものが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
Toshikazu

Nagasaki→Tokyo→China→Fukuoka

1992/07/02

2017年からブログを運営。
現在エンジニアとして福岡で働いています。

Toshikazuをフォローする
Javascript
シェアする

コメント