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.ctrlKeyがtrueになる。同様にaltキーはevent.altKeyがtrueに、shiftキーはevent.shiftKeyがtrueとなる。

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

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