先日紹介した「jQueryを使ってキーボードからの操作でイベントを実行させる方法」にて、
各キーボードに付与されているキーコードを使って制御しましたが
各キーにはどのキーコードが設定されているか調べるツール(?)を
作ってみた(ほぼ自分用)ので併せて紹介してみます。

キーボード操作からイベントを実行させるサンプルでは
矢印キー「←」「→」「↑」「↓」の4つを使って実装しました。

他のキーから操作を設定する際、下記の入力フォームにカーソルを入れ、
実際にキーボードのキーを押すと、そのキーに設定されているキーコードが表示されます。

jQuery KeyCode Examine

中身は大したことないのですが、
下記の様になっています。

◆HTML
<div id="container">
<p>入力フォームにカーソルを入れ、キーコードを調べたいキーを押してください。</p>
キーコード : <input type="text" id="key" />
</div><!--/container-->

そしてこの<img>タグに対して
キーボード操作からアクションを実行させます。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#key").keydown(function(e){
		$(this).val(e.keyCode);
		return false;
	});
});
</script>

キーボード操作からjQueryでイベントを実行させる時など
キーコードを調べるのに使えるかと思っています。

ご参考までに。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでキーボードのキーコードを調べる方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR