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