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と丸の色が一緒になることがわかるかとおもいます。
※追記(テーマ変更によりコードがうまく動作しなくなったためCodePenに移行しました!)

See the Pen
KEYCODE一覧
by 平野寿和@プログラミング (@MyBa1b)
on CodePen.

この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を使ってみてください!

01234
4849505152
56789
5354555657
ABCDE
6566676869
FGHIJ
7071727374
KLMNO
7576777879
PQRST
8081828384
UVWXY
8586878889
Z
90
F1F2F3F4F5
112113114115116
F6F7F8F9F10
117118119120121
F11F12
122123
01234
96979899100
56789
101102103104105
*+./
106107109110111
BackSpaceTabEnterShiftCtrl
89131617
AltPauseBreakCapsLockEscSpace
1819202732
PageUpPageDownEndHome
3334353637
InsertDelete
3839404546
NumLockScrollLock*:+;<,
144145186187188
=->.?/`@{[
189190191192219
|\}]~^_\
220221222226

Toshikazu Hirano

Nagasaki→Tokyo→China(Shenzhen)

1992/07/02
宮崎産まれ、長崎育ち。

前職は、東京のベンチャー企業(IT関連)で仕事をしておりその経験からホームページ作成。運営を行なっています。現在は、中国(深圳市)に住んでおりホームページの運営からYouTube動画の作成等いろいろな活動をしています。

このサイトは「プログラミングとアフィリエイト」のことをメインにいろいろな情報を発信していきます!

Toshikazu Hiranoをフォローする
Javascript
スポンサーリンク
Toshikazu Hiranoをフォローする
All One's Life

コメント