jQueryで押されたキーに関する情報を取得する

jQueryで、キーボードで押されたキーを条件にした動作をさせたいので、keyupイベントを使ってキーコードの取得をしてみます。

キーコードはevent.whichでもevent.keyCodeでも取得できるようです。

まずはデモ

以下のフォームに適当に入力してください

↓こちらに入力したキーに関する情報が表示されます

event.whichによる取得
event.keyCodeによる取得

String.fromCharCode()を使うと、押したキーの値(文字列)も取得できるので一緒に表示してみましたが、ShiftキーやAltキーなどの値は取得できないようです。

ソース

<p>以下のフォームに適当に入力してください</p>
<input type="text" value="" id="key" />
<p>↓こちらに入力したキーに関する情報が表示されます</p>
<dl>
<dt>event.whichによる取得</dt>
<dd><span id="logByWhich"></span></dd>
<dt>event.keyCodeによる取得</dt>
<dd><span id="logByKeyCode"></span></dd>
</dl>
$(function(){

	$('#key').keyup(function(e){
		var w = e.which;
		var k = e.keyCode;
		var str_w = String.fromCharCode(w);
		var str_k = String.fromCharCode(k);
		$('#logByWhich').text( str_w + ' : ' + w );
		$('#logByKeyCode').text( str_k + ' : ' + k );
	});

});
備忘録 | , , , |