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

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

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したり切り替えます。

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

MacとかiPhoneとかApple製品が好きですが、Windows、Android、Alexa、Google Nest Hubなどいろんなガジェットが好き。根っからのキャッシュレス派で、最近は資産運用(株式投資・投資信託)に力を入れてます。

コメント

コメントする

CAPTCHA


目次