prototype.jsクックブック ホットキー(ショートカットキー)の実装
最近、Web上のサービスでもホットキー(ショートカットキー)*1を実装している所を多く見かける。はてなでもそうだし、check*padでもそう。個人的にも凄い好きな機能なので、あると嬉しくなる。
さて、これの実装方法はとりあえずは難しくない(ただし、ブラウザの対応具合に不安が多々ある)。ロジックとしてはこうだ。
- documentに発生したkeydownイベントをキャッチする。
- イベントの発生元がtextareaタグかinputタグの時は、入力なのでイベント無視。
- 押されたキーが欲しいキーかを判断。
- 押されたキーに対応する関数を呼ぶ。
というわけで、サンプル。
http://ya-lab.main.jp/prototype-js-cookbook/06_hotkey/
ここではkeybind.jsと、上記サンプルのソースを見てもらいたい。keybind.jsの動作は上で書いた通りなので、ソースを読んでもらうとして、Keybindクラスの使い方を紹介。
//実際の私のサンプルとは少し違うが、それはキーを押された時に呼び出される関数がクラスメソッドだからです。 this.keybind = new Keybind; keybind.addKeybind('a', aKeyAction); keybind.addKeybind('b', bKeyAction);
これだけのコードでaとbのイベントを取得して適した関数が呼ばれるようになる。便利でしょ。
最初にも書いたけど、ブラウザ間の対応具合に不安があるんですよね。あんまり検証されてないです。