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

  1. HOME
  2. JavaScript入門
  3. 入力されたキーを受け取る(Internet Explorer編)

ここから、キーボードで入力されたキーをJavaScriptで受け取る方法について見ていきます。

キー入力の受付は、ブラウザによって若干違います。 最初は一番普及している、 Internet Explorerでキー入力を受け取る方法について見てみたいと思います。

今回は、「B」キーを押すと前のページに戻り、 「F」キーを押すと次のページに進むスクリプトを組んでみることにしましょう。 ページの移動に関して復習したい方は、以下のページを参照なさってください。

戻る・進む・更新ボタンを作る

キー入力イベント

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

  • onkeydown…キーが押し下げられた時
  • onkeyup…キーを押した後、離された時
  • onkeypress…キーを押している最中

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

document.onkeydown = 関数名;

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

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

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

<script>

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


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

</script>

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

スクリプトの説明

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

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

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

関数pageMove()

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

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

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

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

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

キーコードを調べる

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

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

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

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

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

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

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers