Akio's Log

ソフトウェア開発、プロジェクトマネジメント、プログラミング、ランニングなどなど

JavaScriptでファンクションキーを制御する方法(IE限定)

「Webアプリでファンクションキーを使いたい」という顧客からの要望は、10年くらい前からずっとありましたが、最近また遭遇しました。
備忘録として、まとめておきます。

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで

やりたいこと

  • ファンクションキーでWebアプリケーションの操作をしたい。

問題

  • ファンクションキーを押すと、Webブラウザの規定の動作が実行されてしまう。
    • IEであれば、F1:ヘルプ表示、F3:検索、F5:リロード、F11:全画面表示、など。

概要

  • JavaScriptで、ファンクションキーを押されて、何も実行しないようにする
  • JavaScriptで、押されてファンクションキーによって、独自に定義した処理を実行したい

動作確認

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Sample</title>

<script type="text/javascript"><!--
/**
 * ロード時に実行。初期化関数
 */
function init()
{
    show_message("init");
    // onkeydownイベントハンドラに、key_event関数を登録
    document.onkeydown = key_event;
}
/**
 * キー押下時に実行される関数
 */
function key_event()
{
    // 発生したイベントのキーコードを取得
    var code = event.keyCode;
    show_message("keyCode:["+event.keyCode+"]");
    
    //F1-F12キーであれば、無効化する(F1キー:112,... F12キー:123)
    if(event.keyCode >= 112 && event.keyCode <= 123)
    {
        event.keyCode = null;
        event.returnValue = false;
    }
    //該当するキーコードで分岐。それぞれのcase内に、実行したい独自の処理を記述する。
    switch(code){
        // F1キー
        case 112:
            show_message("F1");
            break;
        // F2キー
        case 113:
            show_message("F2");
            break;
        // F3キー
        case 114:
            show_message("F3");
            break;
        // F4キー
        case 115:
            show_message("F4");
            break;
        // F5キー
        case 116:
            show_message("F5");
            break;
        // F6キー
        case 117:
            show_message("F6");
            break;
        // F7キー
        case 118:
            show_message("F7");
            break;
        // F8キー
        case 119:
            show_message("F8");
            break;
        // F9キー
        case 120:
            show_message("F9");
            break;
        // F10キー
        case 121:
            show_message("F10");
            break;
        // F11キー
        case 122:
            show_message("F11");
            break;
        // F12キー
        case 123:
            show_message("F12");
            break;
        default:
            break;
    }
    return;
}
    
function show_message(str)
{
    document.getElementById("message").innerHTML = str;
}


//--></script>

</head>
<body onload="init()" onhelp="return false;">
  <h1>JavaScript Sample</h1>
  <hr>
  <div id="message"></div>
</body>
</html>

解説

ポイントだけ。

  • HTMLファイルが読み込まれたときに、document.onkeydownで、キーが押されたときのイベント関数を登録する
    • タグのonloadで、JavaScriptで定義のinit()関数を実行
    • init()関数の、document.onkeydown行で、定義したイベント関数key_event()を登録
    • onhelpイベントも"return false;"で無効化する
  • key_event()関数で、押されたキーのキーコードを取得する
    • F1-F12キーに該当するキーコードであれば、無効化する
    • F1キー:112、F2キー:113...、F12キー:123
    • event.keyCode = null;
    • event.returnValue = false;
    • keyCodeにnull(または0)を代入するだけでは不足。戻り値をfalseに設定する必要あり。
  • null代入前のキーコードを使って、独自処理を実行する
    • ここでは、メッセージ表示のみ。

onkeydownを使用して、キーコード取得&無効化までは、簡単にできましたが、どうしてもF1キーでのヘルプ表示だけが、制御を乗っ取る事ができませんでした。

調べてみると、onhelpイベントを無効化しなければいけないことがわかり、onhelp="return false;"を追記したところ、F1からF12までのすべてのファンクションキーで、独自の処理を実行することができました(ここではメッセージ出力だけですが)。

いまどき、出尽くしたネタかと思いますが、一応書いてみました。どなたかのお役にたてば。

JavaScript 第5版

JavaScript 第5版

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

JavaScriptパターン ―優れたアプリケーションのための作法

JavaScriptパターン ―優れたアプリケーションのための作法

欲しいもの

サンワサプライ ジェルリストレスト(フルキーボード向け) TOK-GEL21BK

サンワサプライ ジェルリストレスト(フルキーボード向け) TOK-GEL21BK