「jQuery」キーボードイベントkeydown()のサンプル
環境
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」が表示されます。