JavaScriptでショートカットキーを実装する方法
JavaScriptでショートカットキーを実装する方法です。
以前、「主要ブラウザのファンクションキー割り当て」で軽く触れましたが、Webシステム上でファンクションキーを使ったショートカットキーを実装したいという要望がクライアントからありました。
こういった要望は特に目新しいものではないと思いますが、いい感じの Javascript プラグインを見つけたのでご紹介したいと思います。
かなり使いやすいので皆さんもぜひ試してみてください。
shortcut.jsをダウンロードする
まず、こちらのサイトから shortcut.js をダウンロードします。
・Handling Keyboard Shortcuts in JavaScript
画面下の方に行くと、ダウンロードのリンクがあります。
shortcut.jsの使い方
shortcut.js には shortcut.add()、shortcut.remove() の２つのメソッドが用意されています。
shortcut.add() には５つの引数(オプション)が用意されています。
| オプション | 型 | 説明 |
|---|---|---|
| type | String | 'keydown','keyup','keypress' のいずれかで指定できます。デフォルトは 'keydown' です。 |
| disable_in_input | Boolean | input 要素の上でショートカットキーを押した場合、動作させるかどうかを指定できます。１つのキーでショートカットを作る場合で、テキストボックスがあるような場合、例えば 1 とか a とかを利用する場合は、true にしておかないと、input 要素で入力ができなくなります。デフォルトは false です。 |
| target | DOM Node | キーボードのイベントを拾うときの要素を指定できます。使い方はちょっとわかりません。デフォルトは 'document' です。 |
| propagate | Boolean | ショートカットキー実行後、ブラウザへイベントを移すかどうかが指定できます。例えば true にして Ctrl+A にショートカットキーを実装した場合、ショートカットキーのイベント＋全選択(ブラウザ操作)を同時におこなうことができます。 |
| keycode | Integer | キーコードを数字で指定できます。例えばキーコード A は 65番です。指定したキーで動かない場合に直接数字を指定します。 |
実装方法はこんな感じです。
shortcut.add("Ctrl+B",function() {
alert("Hello world !");
},{
'type':'keydown',
'propagate':true,
'target':document
});
shortcut.remove() の引数は１つです。shortcut.add() で指定したショートカットキーを指定します。
shortcut.add("Ctrl+B",function() {
alert("Bold");
});
//Remove the shortcut
shortcut.remove("Ctrl+B");
デモページ を用意しているので、こちらを参考に実装してみてください。
もちろん 本家サイト でもデモがあります。
まとめ
JavaScriptでショートカットキーを実装する方法を紹介しました。
とても簡単に使えますんで、結構お気に入りです。jQuery の読み込みなしで使えるのも手軽さの一つではないでしょうか。
使う場合は、出来るだけブラウザのショートカットと被らないように実装することをおすすめします。
おつかれさまでした。