先日ここでも紹介した、Webページ内のコンテンツをキーボードから操作させる
ASCENSOR.js」jQueryプラグインと同じ様に、
jQueryを使って、キーボードからのキー操作でページ上でイベントを実行させる
簡単なサンプルを作ってみたので紹介してみます。

「ASCENSOR.js」プラグインのように大掛かりなものではなく
今回のサンプルではキーボードの矢印キー「←」「→」「↑」「↓」を
クリックしてそれぞれ個別のアクションを実行させる、という方法です。

キーボードのキーには個別にキーコードというものが割り当てられています。
矢印キーのそれぞれキーコードは
——————————
「→」・・・39
「←」・・・37
「↑」・・・38
「↓」・・・40
——————————
となっているのでこれらの値を元にアクションを実行させます。

jQueryでのキーボード操作のイベントは「keyup」と「keydown」があり、
「keyup」はキーを押して指がキーから離れた際にアクションが実行され、
「keydown」はキーを押した時点で実行されます。

まずは「keyup」を使っての動作サンプルから。
矢印キーの操作で画像を動かします。
キーボードの矢印を「←」「→」「↑」「↓」を押してください。
一回のアクションで上下左右それぞれに10pxずつ移動します。

jQuery Keybord Action SAMPLE【keyup】


※操作する前に一度、サンプルエリアの白枠部分をクリックしてから操作してください。

サンプル画面を別枠表示する際はこちらから

「keyup」でのイベント操作なので矢印キーを押すごとに一回移動します。

このサンプルの構成について。
HTMLはとりあえず画像を配置しているだけです。

◆HTML
<div id="container">
<img src="img/photo01.jpg" width="100" height="100" alt="" />
</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(){
	$('html').keyup(function(e){
		switch(e.which){
			case 39: // Key[→]
			$('#container img').animate({left: '+=10px'},100);
			break;

			case 37: // Key[←]
			$('#container img').animate({left: '-=10px'},100);
			break;

			case 38: // Key[↑]
			$('#container img').animate({top: '-=10px'},100);
			break;

			case 40: // Key[↓]
			$('#container img').animate({top: '+=10px'},100);
			break;
		}
	});
});
</script>

単純にこれだけです。

jQueryでのキーボード操作では「switch」と「case」を使うことで、
キーの振り分けができるようになっているようです。

続いては「keydown」を使っての動作サンプル。
同じ様に矢印キーの操作で画像を動かします。
キーボードの矢印を「←」「→」「↑」「↓」を押してください。
一回のアクションで上下左右それぞれに10pxずつ移動します。

jQuery Keybord Action SAMPLE【keydown】


※操作する前に一度、サンプルエリアの白枠部分をクリックしてから操作してください。

サンプル画面を別枠表示する際はこちらから

「keydown」でのイベント操作だとキーを押した時にアクションが実行されるので
キーを押しっぱなしにすることで、連続してアクションを実行させることが出来ます。

このサンプルの構成について。
HTMLは「keyup」の物と同じでスクリプトの一部のみ変更になります。

◆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(){
	$('html').keydown(function(e){
		switch(e.which){
			case 39: // Key[→]
			$('#container img').animate({left: '+=10px'},100);
			break;

			case 37: // Key[←]
			$('#container img').animate({left: '-=10px'},100);
			break;

			case 38: // Key[↑]
			$('#container img').animate({top: '-=10px'},100);
			break;

			case 40: // Key[↓]
			$('#container img').animate({top: '+=10px'},100);
			break;
		}
	});
});
</script>

ただ、functionの実行パターンのところ
「keyup」となっていた箇所が「keydown」となったのみで他は一緒です。

サンプルについては以上です。

今回のサンプルでは矢印キーでの操作としましたが、
キーコードをそれぞれ指定することで他のキーを使って
各アクションの操作をすることも可能になります。

jQueryを使ってキーボード操作をする際に是非。。。

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

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

Related Posts

Comments (1)







コメント内容

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

jQueryを使ってキーボードからの操作でイベントを実行させる方法

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