「jQuery」キーボードイベントkeydown()のサンプル

2022年7月11日

環境

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>

結果

エンターキーを押下すると、「イベントのkey : Enter」と「イベントのkeyCode : 13」が表示されます。
Altキーを押下すると、「イベントのkey : Alt」と「イベントのkeyCode : 18」が表示されます。

jQuery

Posted by arkgame

関連記事: