taccuma note

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

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

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

$(document).keypress(function(event){
  if( event.which === 111 ) {
    $('.menu').toggle();
  }
});

まず最初の$(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したり切り替えます。

この記事をシェアする

コメント

コメントは管理人の承認後に公開されます...

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最近の投稿

おすすめ

タグクラウド

カテゴリー