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 |
コメント