ywork2020.com

Title

イベント発生時に入力装置からのキーコードを取得する

目次 (INDEX)

whichとは

ここで説明する which とは次の語句からなるjQueryのEventObjectプロパティです。
which
読み: ウィッチ
意味: どちら、どれ、どの人

目次に戻る

whichプロパティの概要

この EventObject プロパティは、マウスやキーボードなどの入力装置からイベントが発生したときに、 その入力された正規化キーコードを取得することができます。

なお、キーコードは文字コードではありませんので混同しないようにお願いします。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

構文は 02 行目の部分です。 02 行目の eo は 01行目の function(eo) の イベントオブジェクトを参照しています。

$(Selector).EventMethod(function(eo){
	var eventWhich = eo.which;
});

目次に戻る

サンプルコードと実行結果

ここでは、docment の keydown 、keypress 、keyup の各イベント、に関数をアタッチしておき、 イベントメソッドを実行した時に生成されるイベントオブジェクトの which プロパティの値を取得して表示してみます。

サンプルコード: CSS
<style>
	#idDown, #idPress, #idUp{
		background-color: ##lightcyan;
		border: thin solid ##gray;
		margin: 1em;
		padding: 1em;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div id="idDown">keydown: <output></output></div>
	<div id="idPress">keyPress: <output></output></div>
	<div id="idUp">keyup: <output></output></div>
	<script>...</script>
</body>
  • 06, 07, 08: div (ブロックコンテナー要素です。この要素らのキーイベントからイベントオブジェクトのプロパティを取得してボタンのテキストに表示します。)
サンプルコード: script
<script>
	$(document).keydown(function(eo){
		$("#idDown output").text(eo.which);
	});
	$(document).keypress(function(eo){
		$("#idPress output").text(eo.which);
	});
	$(document).keyup(function(eo){
		$("#idUp output").text(eo.which);
	});
</script>
  • 03, 06, 09: eo.which (イベントオブジェクトの which プロパティを取得しています。 この 03 行目の eo は 02 行目の function(eo) を参照しています。 06 は 05 行目を参照。 09 は 08 行目を参照。)
実行結果: キーボードから入力を行うとキーコードを返します。
keydown:
keyPress:
keyup:

目次に戻る