JavaScript Maniax
■キー入力判定その２■
onkeypressとonkeydownの動作の違いを検証します。
前述のonkeypressイベントは、画面にフォーカスが当たっているときに押されたキーのコードを取得できる便利なものでしたが、キー入力を判定するイベントハンドラにはこの他、onkeydown、onkeyupなどがあります。
onkeyupは名前の通り、キーを離されたタイミングで発生するイベントです。
docoment.onkeyup = keyUp;
などと記載して、キーが離されたタイミングで関数keyUpをCallすることが出来ます。
もう一つのonkeydownはキーが押されたタイミングで発生するイベントです。
以下の記載方法で、キーが押されたタイミングで関数keyDownがCallされます。
docoment.onkeydown = keyDown;
こう書くとonkeypressとonkeydownの違いは無いように思えますが、いろいろと異なる点がありますのでまとめてみます。
・シフトキー（CapsLock）によるコードの違い
onkeypressでは、シフトキーが押された状態と押されていない状態（CapsLockの掛かった状態と外れた状態）でevent.keyCodeの値が異なります。
onkeydownではevent.keyCodeの値は変わらないため、このイベントだけではシフトキーが押されているかどうかは判断付きません。
・処理順序
onkeydownは文字通りキーが押されたタイミングなのに対し、onkeypressはキーが暫く押された後に動作します。両方のイベントハンドラを一つのソース内に記載した場合、まずonkeydownが呼ばれ、その後にonkeypressが呼ばれます。
・ファンクションキーやカーソルキー等を押下時の反応
onkeypressではこれらのキーが押されてもイベントが発生しません。これらのキーによって何らかの動作をさせたい場合はonkeydownを使用します。
以下のソースで上記３点を確認することが出来ます。
//--Sample--
<SCRIPT language="javascript">
function keyDown(){
alert("down:" + event.keyCode);
}
function keyPress(){
alert("press:" + event.keyCode);
}
document.onkeydown = keyDown;
document.onkeypress = keyPress;
</SCRIPT>
//--Sample--
応用編
ゲームで使用することを考えるとやはりカーソルキーでのイベント発生が取得できるonkeydownは魅力的ですが、シフトキーが押されているかどうかを判断させるにはonkeypressの方が使いやすそうです。
こんな場合、私が良く使用する方法として、現在のキーの状態を変数に格納してしまう方法があります。
//---Sample---
<SCRIPT language="javascript">
kCode=new Array(256);
for (i=0;i<256;i++){
kCode[i]=0;
}
function keyDown(){
kCode[event.keyCode]=1;
}
function keyUp(){
kCode[event.keyCode]=0;
}
document.onkeydown = keyDown;
document.onkeyup = keyUp;
</SCRIPT>
//---Sample---
これにより、たとえば現在カーソルキーの[↑]が押されているかどうかは、
if (kCode[38]) {
という形で参照することができます。
また、Shift+Aが押されているかどうかは
if (kCode[16] && kCode[65]) {
という形で参照することができます。
ところが今度はCapsLockが押されているかどうかの判定が出来なくなってしまいました。
回避する方法としては、onkeypressとonkeydownを両方callして、シフトキーの押下チェックと共に両関数のevent.keyCodeを取得することでCapsLockが押されているかどうかの判定は可能ですが、そこまでしているサイトは少なくとも自分は知らないです。
[