「jQuery」キーボードイベントkeydown()のサンプル
環境
Google Chrome 103.0.5060.114
Windows 10 Home 64bit
jQuery 3.6.0
Google Chrome 103.0.5060.114
Windows 10 Home 64bit
jQuery 3.6.0
Google Chrome 103.0.5060.114 Windows 10 Home 64bit jQuery 3.6.0
構文
$(“セレクタID名").keydown(function(event) {処理コード}
event.key キーボードイベントキー
event.keyCode キーボードイベントキーコード
shiftやalt等の修飾キーも発生します。Enterキーも発生します。
使用例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
名前<input id="txtName" type="text" value="" maxlength="10" autocomplete="off">
<p>イベントのkey : <span id="cftA"></span></p>
<p>イベントのkeyCode : <span id="cftB"></span></p>
<script>
$("#txtName").keydown(function(event) {
const ky = event.key;
const kc = event.keyCode;
$("#cftA").text(ky);
$("#cftB").text(kc);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
名前<input id="txtName" type="text" value="" maxlength="10" autocomplete="off">
<p>イベントのkey : <span id="cftA"></span></p>
<p>イベントのkeyCode : <span id="cftB"></span></p>
<script>
$("#txtName").keydown(function(event) {
const ky = event.key;
const kc = event.keyCode;
$("#cftA").text(ky);
$("#cftB").text(kc);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
名前<input id="txtName" type="text" value="" maxlength="10" autocomplete="off">
<p>イベントのkey : <span id="cftA"></span></p>
<p>イベントのkeyCode : <span id="cftB"></span></p>
<script>
$("#txtName").keydown(function(event) {
const ky = event.key;
const kc = event.keyCode;
$("#cftA").text(ky);
$("#cftB").text(kc);
});
</script>
</body>
</html>
結果
エンターキーを押下すると、「イベントのkey : Enter」と「イベントのkeyCode : 13」が表示されます。
Altキーを押下すると、「イベントのkey : Alt」と「イベントのkeyCode : 18」が表示されます。
エンターキーを押下すると、「イベントのkey : Enter」と「イベントのkeyCode : 13」が表示されます。
Altキーを押下すると、「イベントのkey : Alt」と「イベントのkeyCode : 18」が表示されます。
エンターキーを押下すると、「イベントのkey : Enter」と「イベントのkeyCode : 13」が表示されます。 Altキーを押下すると、「イベントのkey : Alt」と「イベントのkeyCode : 18」が表示されます。