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

2022年9月30日

環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
jquery 3.6.0

構文
1.Enterキーのキーコードを判定
event.key === “Enter"
2.Altキーのキーコードを判定
event.key === “Alt"
3.Shiftキーのキーコードを判定
event.key === “Shift"

使用例

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

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

</body>
</html>

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

jQuery

Posted by arkgame

関連記事: