-Javascript- Javascriptでファンクションキー制御
Javascriptでファンクションキー制御
「Webアプリでファンクションキーを無効化」したいという要望があったので備忘録として、まとめてます。
- JavaScriptで、ファンクションキーを押されても実行しないようにする
- JavaScriptで、押されたファンクションキーによって、独自に処理を定義したい
※IE11(version:11.0.9600.18816),Chrome(version:61.0.3163.100)で動作確認済 2017-10-23
CODE
以下のｽｸﾘﾌﾟﾄで押されたキーの判定が行える
<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; }
ポイント
HTMLファイルが読み込まれたときに、document.onkeydownで、キーが押されたときのイベント関数を登録してます
タグのonloadで、JavaScriptで定義を実行
init()関数の、document.onkeydown行で、定義したイベント関数key_event()を登録
F1-F12キーに該当するキーコードであれば、無効化する（F1キー：112、F2キー：113...、F12キー：123）
応用
これを応用してロード時無効化 ボタン押下時無効化オンオフするには以下のコードを確認ください
<script>
//ロード時F11無効
window.document.onkeydown = function (evt) {
if ((evt.which == 122)
) {
evt.which = null;
return false;
}
}
//有効ボタン押下時有効
function valid() {
window.document.onkeydown = function (evt) {
if ((evt.which == 122)
) {
evt.which = 122;
return true;
}
}
}
//無効ボタン押下時無効
function invalid() {
window.document.onkeydown = function (evt) {
if ((evt.which == 122)
) {
evt.which = null;
return false;
}
}
}
</script>
<body> <input type="button" value="F11有効" onclick="valid()"> <input type="button" value="F11無効" onclick="invalid()"> </body>
このままではF1キーでのヘルプ表示だけが、制御変更ができないので、
onhelpイベントを無効化にする必要があるため、onhelp="return false;"の追記が必要です
備忘録のため記述したが、どなたかのお役にたてば。
