先日ここでも紹介した、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を使ってキーボード操作をする際に是非。。。

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