JavaScriptでキー入力を扱う方法について解説(FireFox編)

HOME
更新日:2013.10.04
HOMEJavaScript入門 > 入力されたキーを受け取る(FireFox編)

入力されたキーを受け取る(FireFox編)

前のページでは、Internet Explorerでキー入力を受け付ける方法について見ました。 他にもOperaやGoogle Chrome,Safariなどの最新版でも動作します。

しかしブラウザシェア率第2位FireFoxでは残念ながら動きません(Ver.24の時点では)。 それでこのページでは、FireFoxでも動作するスクリプトを組んでみたいと思います。

今回も前のページと同じく、「B」キーを押すと前のページに戻り、 「F」キーを押すと次のページに進むスクリプトを組んでみることにします。

FireFoxでキー入力を受け付ける場合

FireFoxでキー入力を受け付ける場合、event.keyCodeが使えません。 それで、この部分を次のように変更します。

  1. event → 関数引数を指定
  2. keyCode → which

具体的には、以下のようなコードになります。

document.onkeydown = pageMove;


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

このページのヘッダーに、上記のスクリプトを記入しています。 動くかどうか確認してください。 OperaやChrome、Safari等では動作すると思います。 しかし今度はInternet Explorerで動作しません(IE10では動作することを確認)。

では両方のブラウザで動かすにはどうしたら良いか、次に見てみることにしましょう。

両方のブラウザで動作させる

Internet ExplorerとFireFoxの両方でキー入力を受け付けるには、 以下のようにします。

<script>

document.onkeydown = pageMove;

function pageMove(evt)
{
  var kcode;  //キーコードを格納する変数
  
  //document.allはInternet Explorerでのみ使用可能
  if (document.all)  
  {
    kcode = event.keyCode;
  }
  else
  {
    kcode = evt.which;
  }
  
  if ( kcode == 66 ) { history.back(); }
  if ( kcode == 70 ) { history.forward(); }
}
    
</script>

変数kcodeを宣言して、取得したキーコードを格納するようにしています。

そしてDOM編の最初で少し触れましたが、 document.allを使って、Internet Explorerでのみ動作するスクリプトを記述します。 キーコードを取得するには、event.keyCodeでした。 取得したキーコードは変数kcodeに代入します。

else文の中(Internet Explorer以外のブラウザ)では、「引数.which」を使ってキーコードを取得し、 変数kcodeに代入しています。

あとは変数kcodeに代入された数値を調べて、戻る・進むの処理を記述しています。