jQuery キー入力でキーコードを取得(keydown他)

01. キーボードイベント

・jQueryのキーボードイベント

02. サンプル

03. JavaScript

jQueryのキーボードイベント

keydown()	キーを押すと発生します。 shiftやalt等の修飾キーも発生します。Enterキーも発生します。
keyup()	キーを離した時に発生します。 shiftやalt等の修飾キーも発生します。Enterキーも発生します。
keypress()	キーを押すと発生します。 shiftやalt等の修飾キーは発生しません。Enterキーは発生します。

それぞれJavaScriptのkeydown,keyup,keypressイベントが発生します。

以下は、jQueryのキーボードイベントのリンクです。
https://api.jquery.com/category/events/keyboard-events/

キーコードを取得する(keydown)

以下のテキストボックスに何かキーを入力すると、keydownイベントが発生し、
キーコードを取得して表示します。

数値の1やアルファベットのaや、shiftキーやエンターキーや矢印(→)も入力できます。

event.key :

event.which :

event.keyCode :

event.code :

上記サンプルのコードです。

<style>#text1{width:25px;text-align:center;}</style>

<input id="text1" type="text" value="" maxlength="1" autocomplete="off">
<p>event.key : <span id="sp1"></span></p>
<p>event.which : <span id="sp2"></span></p>
<p>event.keyCode : <span id="sp3"></span></p>
<p>event.code : <span id="sp4"></span></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#text1").keydown(function(event) {
	const a = event.key;
	const b = event.which;
	const c = event.keyCode;
	const d = event.code;
	$("#sp1").text(a);
	$("#sp2").text(b);
	$("#sp3").text(c);
	$("#sp4").text(d);
});
</script>

12行目のkeyは以下の値を返します。
数値の1のときは1、英字のaのときはa、エンターキーを押したときはEnter。
13,14行目のwhichとkeyCodeは、キーの数値を返します。非推奨になっています。
15行目のcodeは以下の値を返します。※IEは対応していません。
数値の1のときはDigit1、英字のaのときはKeyA、エンターキーを押したときはNumpadEnter。

以下は、MDNのキーボードイベントのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent

キーコードを判定する

<input id="text1" type="text" value="" maxlength="1" autocomplete="off">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#text1").keydown(function(event) {
	if (event.key === "Enter"){
		console.log("Enterキーが押されました");
	}
	if (event.key === "Alt"){
		console.log("altキーが押されました");
	}
	if (event.key === "Shift"){
		console.log("shiftキーが押されました");
	}
	if (event.key === "Control"){
		console.log("ctrlキーが押されました");
	}
});
</script>

1行目のテキストボックスにエンターキー、アルトキー、シフトキー、コントロールキーを入力するとそれに対応した文字が表示されます。

キー入力を無効化する

<input id="text1" type="text" value="" maxlength="1" autocomplete="off">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#text1").keydown(function(event) {
	if (event.key === "Backspace"){
		console.log("Backspaceキーが押されました");
		return false;
	}
});
</script>

8行目のreturn falseでキー入力が無効化されます。

上記のサンプルでは、バックスペースキーを押した時は、
7行目の文字は表示されます。
8行目は、return falseなので1行目のテキストボックスに入力した文字を消せません。

JavaScriptで書いた場合

<input id="text1" type="text" value="" maxlength="1" autocomplete="off">

<script>
document.getElementById("text1").onkeydown = function(event){
	if (event.key === "Backspace"){
	console.log("Backspaceキーが押されました");
	return false;
	}
}
</script>

4行目のように、getElementByIdメソッドとイベントハンドラのonkeydownを使用すればキーコードを取得できます。