Okapi Project

JavaScript によるショートカットキーの処理

バージョン
2003 年 07 月 02 日 Ver.1.0
作成者
T.Itoh ( Xware )

要約

JavaScript を使って Internet Explorer などの Web ブラウザが持つショートカットキーを無効化する方法を説明します。

目次


1.押下されたキーの判別

まずはサンプルコードを。
Sample Code (1) F5 キー(ページの最新表示)を無力化する JavaScript 実装例
 <HTML>
  <HEAD>
    <SCRIPT language="JavaScript">
      <!--
        function keydown() {
          if(event.keyCode == 116){
            event.keyCode = 0;
            return false;
          }
        }
        document.onkeydown = keydown;
      -->
    </SCRIPT>
    <TITLE>Test Sample </TITLE>
  </HEAD>
  …
document.onkeydown によりページ上からのキーボードイベントを取得することができます。ここでは event.keyCode とすることでキーボートから押下されたキーのコード値を取得することができます。

その値が 116 であれば F5 キーであると判断し、event.keyCode に 0 を設定することで強制的に F5 キーが押下されたことを無効化しています。ここで 116 が F5 キーであることは周知のものとしていますが、JavaScript によって簡易的に判別するには、以下のサンプルコードを参照してください。
Sample Code (2) キーのコード値を判別するための JavaScript 実装例
 <HTML>
  <HEAD>
    <SCRIPT language="JavaScript">
      <!--
        function keydown() {
          alert(String.fromCharCode(event.keyCode));
        }
        document.onkeydown = keydown;
      -->
    </SCRIPT>
    <TITLE> Test Sample </TITLE>
  </HEAD>
  …
この例は最初のサンプルを一部修正したものですが、キーが押されるとメッセージボックスを表示するようになっています。そのときに String.fromCharCode(xxx) によってコード値を文字列に変換しています。これによってアルファベットなどは容易に判別することができます。

2.問題点

用途として、Alt + ← などのブラウザの戻るボタンと同等の動きを制御することに役立ちそうですが、現状では以下の問題点が確認されています。
  1. 上記サンプル例では Alt, Shift, Ctrl などと他のキーを同時に押下するものは判別できない。
  2. ある程度ブラウザ依存の処理
問題点はいくつかありますが、Alt + ← などの場合はコード値が別の方法で分かれば解決することなので、別途調査することでキーの制御を可能にしたいと考えています。

Copyright © 2003 - 2006 Okapi Project All Rights Reserved.