JavaScriptでFunctionキーのイベントを書き換え
仕事でファンクションキーにイベントを設定する必要が出たので備忘録で。
通常だとF1でヘルプF5で更新などが掛かってしまうわけですが、
これを別のものにしたいということになりました。
面倒なのでjQueryでkeyDownに設定したんですが、ヘルプキーが結構わがままで切れない。
IE限定ですがヘルプはonhelpというイベントがあるらしいので、
こいつを殺してしまうことにしたらIEはヘルプが出なくなりました。
[js]
if(window.onhelp !== undefined)window.onhelp = function(){return false;}
[/js]
IE以外は多分持っていないので、持っているかどうか判定してからイベントリスナを設定しています。
で、これだとChromeのヘルプがまだ出ます。
しょうがないのでkeydownで切ってしまいます。
どうせ別の処理を割り当てるのでこれで問題ないと。
その代わりデフォルトの処理は一切利かなくなります。
[js]
$(window).keydown(function(e)
{
var code = e.keyCode;
if(!isNaN(code) && code >= 112 && code <= 123)
{
return false;
}
});
[/js]
ファンクションキーへの割り当てを動的に変える場合にはkeydownではなくonで。
最低限ファンクションキーのみ使えなくするには、KeyCodeでファンクションキーだけ指定します。
KeyCodeの割り当ては下記の通りです。
| キー | コード | 役割 |
|---|---|---|
| F1 | 112 | ヘルプ |
| F2 | 113 | |
| F3 | 114 | ページ内検索 |
| F4 | 115 | （IEでアドレスバーにフォーカス） |
| F5 | 116 | 更新 |
| F6 | 117 | フォーカス移動 |
| F7 | 118 | |
| F8 | 119 | |
| F9 | 120 | |
| F10 | 121 | 一部Alt |
| F11 | 122 | 全画面 |
| F12 | 123 |
ということで、112以上123以下のキーを切ってしまえばOKということになります。
あとはswitch文で各キーごとに処理を書くだけです。
一応このままでも動くのでこれでいい気もしますが、
なにか違う動作を割り当てられているかもしれないので、
デフォルトのキーイベントを全部とめてしまうほうがいいかもしれないです。
特にファンクションキー以外のキーにも割り当てをする場合には止めといたほうがいいです。
イベントをとめる話は伝播とか入ってめんどくさいのでまた別の機会にでも。
[js]
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
[/js]
とりあえずこれでいいんじゃないかなとは思います。
e.stopPropagation()とe.stopImmediatePropagation()はあわせて使うとバブリングが止められるので。
