JavaScriptでファンクションキーを制御する方法(IE限定)
「Webアプリでファンクションキーを使いたい」という顧客からの要望は、10年くらい前からずっとありましたが、最近また遭遇しました。
備忘録として、まとめておきます。
JavaScript本格入門 ?モダンスタイルによる基礎からAjax・jQueryまで
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2010/11/27
- メディア: 大型本
- 購入: 29人 クリック: 673回
- この商品を含むブログ (53件) を見る
やりたいこと
- ファンクションキーでWebアプリケーションの操作をしたい。
問題
- ファンクションキーを押すと、Webブラウザの規定の動作が実行されてしまう。
- IEであれば、F1:ヘルプ表示、F3:検索、F5:リロード、F11:全画面表示、など。
概要
- JavaScriptで、ファンクションキーを押されて、何も実行しないようにする
- JavaScriptで、押されてファンクションキーによって、独自に定義した処理を実行したい
動作確認
- Windows7+IE8/9
サンプルコード
<!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までのすべてのファンクションキーで、独自の処理を実行することができました(ここではメッセージ出力だけですが)。
いまどき、出尽くしたネタかと思いますが、一応書いてみました。どなたかのお役にたてば。
- 作者: David Flanagan,村上列
- 出版社/メーカー: オライリー・ジャパン
- 発売日: 2007/08/14
- メディア: 大型本
- 購入: 52人 クリック: 1,011回
- この商品を含むブログ (270件) を見る
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
- 作者: Douglas Crockford,水野貴明
- 出版社/メーカー: オライリージャパン
- 発売日: 2008/12/22
- メディア: 大型本
- 購入: 94人 クリック: 1,643回
- この商品を含むブログ (189件) を見る
JavaScriptパターン ―優れたアプリケーションのための作法
- 作者: Stoyan Stefanov,豊福剛
- 出版社/メーカー: オライリージャパン
- 発売日: 2011/02/16
- メディア: 大型本
- 購入: 22人 クリック: 907回
- この商品を含むブログ (77件) を見る
欲しいもの
東プレ キーボード REALFORCE91UBK-S テンキーレス日本語配列カナなし USB 有線接続 静音タイプ 静電容量無接点方式 変荷重 ブラック NG01BS
- 出版社/メーカー: 東プレ
- 発売日: 2010/08/05
- メディア: Personal Computers
- 購入: 7人 クリック: 128回
- この商品を含むブログ (15件) を見る
サンワサプライ ジェルリストレスト(フルキーボード向け) TOK-GEL21BK
- 出版社/メーカー: サンワサプライ
- 発売日: 2007/09/10
- メディア: Personal Computers
- 購入: 3人 クリック: 11回
- この商品を含むブログ (3件) を見る