入力されたキーを受け取る（Internet Explorer編）JavaScript入門

キー入力イベント

まず最初に、キー入力イベントについて見ておきましょう。 以下の３つがあります。

今回は、キー押下時「onkeydown」を用いたいと思います。 このイベントをJavaScriptで受け取るには、 HTMLのヘッダーに以下の一行を記入します。

document.onkeydown = 関数名;

キーが押された時の処理を記入した関数名を右辺に指定します。 これで入力されたキーを受け取れるようになります。

キー入力でページ移動するスクリプト

では具体的にキーイベントを利用したスクリプトを見ていきましょう。 今回、ページ移動処理を記入する関数の名称は「pageMove」にしました。 ではHTMLのヘッダーに以下のように記入してみてください。

<script>

//キー押下時に関数pageMove()を呼び出す
document.onkeydown = pageMove;


function pageMove()
{
  if (event.keyCode == 66)  //「Ｂ」が押されたか確認
  {
    history.back();
  }
  if (event.keyCode == 70)  //「Ｆ」が押されたか確認
  {
    history.forward();
  }
}

</script>

ちなみにこのページのヘッダーに上記のスクリプトを記入しています。 キーボードの「Ｂ」や「Ｆ」を押して移動が可能か確かめてみてください （Internet Explorerと幾つかのブラウザでは動きますが、FireFox5等では動きません）。

スクリプトの説明

では上記のスクリプトを見ていきましょう。

キー押下時の処理を指定する

document.onkeydownを使ってキーを押された時に関数pageMove()を呼び出すようにしています。 右辺は関数名を指定なので、カッコは書きません。

関数pageMove()

関数pageMove()の中で、「Ｂ」または「Ｆ」が押されたか調べます。 特定のキーが押されたかどうか調べるには、以下のようにします。

if ( event.keyCode == キーコード ) { 処理 }

ここでキーコードというものが出てきましたが、 これは各キーに割り当てられている数字のことです。 「Ａ」ならば65、「Ｚ」なら90、スペースキーなら32…という感じで、 キーによって特定の数字が付されているのです。

event.keyCodeを使うと、押されたキーのキーコードを取得できます。 その数値をif文を使って調べることにより、特定のキーが押されたか確認できるのです。

今回は「Ｂ」（キーコード66）を押された時はhistory.back()で前のページに戻り、 「Ｆ」（キーコード70）が押された時はhistory.forward()で次のページに進むようにしました。

キーコードを調べる

キーコードを調べるには、以下のページを用いることができます。

各ブラウザのキーコード表[JavaScript]

またリファレンス本等にも大抵載っています。1冊持っておかれると良いかも知れません。 私が愛用しているリファレンス本の最新版のリンクも掲載しておきます。

改訂第5版 JavaScript ポケットリファレンス

注意点として、この取得されるキーコードが、 onkeydownの時とonkeypressの時で違うということが挙げられます。 プログラムを組むときはしっかりキーコード表で確認することをお勧めします。

次のページでは、FireFoxでキーボード入力を受け付ける方法について考えます。