「jQuery」event.keyでキーコードを判定するサンプル

2014年7月14日2022年1月28日

環境
jQuery 3.6.0
書式
$(セレクタ名).keydown(function(event) {
if (event.key === “Shift"){処理コード1
if (event.key === “Control"){処理コード2

使用例

<input id="uid" type="text" value="user01" maxlength="10" autocomplete="off">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#uid").keydown(function(event) {
      if (event.key === "Shift"){
            alert("shift(シフト)キーが押されました");
      }
      if (event.key === "Control"){
            alert("ctrl(コントロール)キーが押されました");
      }
      if (event.key === "Enter"){
            alert("Enter(エンター)キーが押されました");
      }
      if (event.key === "Alt"){
            alert("alt(アルト)キーが押されました");
      }
});
</script>

実行結果
Shiftキーを入力すると、「shift(シフト)キーが押されました」メッセージが表示されます。
Ctrlキーを入力すると、「ctrl(コントロール)キーが押されました」メッセージが表示されます。
Enterキーを入力すると、「Enter(エンター)キーが押されました」メッセージが表示されます。
Altキーを入力すると、「alt(アルト)キーが押されました」メッセージが表示されます。