JavaScript Maniax

■キー入力判定■

ブラウザにフォーカスがあたっている時にキー入力が合った場合、どのキーが押されたかを判別する方法があります。

document.onkeypress

というイベントが呼び出されます。
そこで、キーが押された際に何か動作させたい場合は、このイベントが発生した際に指定した関数が呼ばれるよう記述します。

document.onkeypress = keyPress;

これで、キー入力があるとkeyPress関数がcallされます。

keyPress関数内では、event.keyCodeというプロパティを参照することで、どのキーが押されたかを判断します。
どのキーコードとどのキーが対応しているかは下記のような関数を記述し、実際に押して確認をしていただければと思います。

//---Sample---
function keyPress(){
    e = event.keyCode;
    alert("key=" + e);
}
//---Sample---

alert文ではキーを押すたびにダイアログが表示されて鬱陶しいので、3行目を

    //alert("key=" + e);
    window.status = "key=" + e;

に切り替えることで、ステータス欄（ブラウザの一番下）に値を表示させることが出来ます。

ただしこの方法ではファンクションキーやカーソルキーの入力は検知できません。
例えばゲームを作成する場合など、カーソルキーの値が取得できれば便利なのですが
残念ながらOnKeyPressでは対応できません。
対応方法についてはまた後の章にて。

応用編

キー入力された値を利用して画面上にコ○ミコマンドの様な裏技をつける事が出来ます。
グローバル変数として、キーとなる値を設定しておき、入力された値と一致した場合にイベントが発生するような関数を組めばよいのです。

//---Sample---
var code, inputCode;
code = "97;98;99;";
inputCode = "";

function keyPress(){
    inputCode += event.keyCode + ";";
    if (code == inputCode) {
        alert("OK!");
    }
}
document.onkeypress = keyPress;
//---Sample---

サイトのちょっとしたアクセントとして使えます。

[sample] [DL]

[top] [index]