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のイベントを取得して適した関数が呼ばれるようになる。便利でしょ。

最初にも書いたけど、ブラウザ間の対応具合に不安があるんですよね。あんまり検証されてないです。

*1:ホットキーとかショートカットキーとかキーバインドとか言うけど、何か違いがあるのかなぁ?