jQueryでキーボードショートカット機能を実装する

jQueryを使えばキーボードショートカット機能も比較的簡単に作ることが出来るので、メモ。例えばキーボードの｢o（オー）｣を押せば画面上部のメニューがトグル式で開いたり閉じたりって事が可能になる。

[js]
$(document).keypress(function(event){
if( event.which === 111 ) {
$(‘.menu’).toggle();
}
});
[/js]

まず最初の$(document)だが、ウェブページ上のどっかにフォーカスが当たっていれば必ずショートカット機能を発動させたいので、jQueryオブジェクトは$(document)にする。それに対してkeypress()イベント。keypress()のevent handlerであるfunction(){}には必ずeventという引数を取らせます。

2行目のif文ですが、もしキーボードの押されたkeyが｢o｣なら・・・次のコードブロックを実行しなさいということ。event.whichでどのキーが押されたかをkey codeで取得し、それが111（アルファベットのオー）ならば中括弧の中身が実行されます。

キーボードの各キーにはkey codeという番号が割り振られていて、アルファベットのオーはkey code 111になるので、上のプログラムが成立します。キーボードのあるキーのkey codeが何番になるのかはググったらすぐに出てきますが、一応以下のサイトをご紹介。

.menuが付いてるメニュー全体をCSSでdisplay: noneとして消しておき、jQueryのtoggle()メソッドでshowしたりhideしたり切り替えます。