jQueryを使ったキーイベントの取得と利用

公開
更新日

スポンサーリンク

JavaScript、というかjQueryを使って、キーイベントが発生した際にキーコードを取得する方法と利用についてのメモ。

キーコードの取得

キーボードイベント発生でイベントオブジェクトがわたされるので、whichプロパティでキーコードを取れる。例えばenterキーを押すと、enterキーのキーコードは13なので、event.which === 13となる。enterキーが押されたときに反応させるにはこうなる。

$("body").keypress( function( event ) {
	if( event.which === 13 ){
		alert( "enterキーが押されました。" );
	}
});

コントロールキー / オルトキー / シフトキーとの同時押し

コントロールキー・オルトキー・シフトキーと他のキーを同時押しした場合のキーイベントの取得方法。

まず、コントロールキー・オルトキー・シフトキーはkeypressだと反応しない。keyupかkeydownを使う。

キーイベントが発生した時にctrlキーが押されている場合、event.ctrlKeytrueになる。同様にaltキーはevent.altKeytrueに、shiftキーはevent.shiftKeytrueとなる。

つまりctrl + ↑で反応させるならこう。

$("body").keydown( function ( event ){
	if( event.ctrlKey === true && event.which === 38 ){
		alert( "ctrlキーと↑が同時に押されました。" );
	}
});

スポンサーリンク


Comment


  1. 赤ペン先生 : 投稿日:2014年7月15日 2:44 PM

    × アルトキー
    ○ オルトキー

    Alt=Alternate

    恥ずかしいですね。

    • 管理人 : 投稿日:2014年7月20日 7:51 AM

      >> 赤ペン先生さま
      ご指摘ありがとうございます。修正しました。