JavaScript イベントハンドラのonkeydownを使ってキーコードを取得する方法

環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122

書式
document.getElementById(“セレクターID名").onkeydown = function(e) {
if(e.key == “Enter") //Enterキー
if(e.key == “Backspace") //Backspaceキー
getElementByIdメソッドとイベントハンドラのonkeydownを使用すればキーコードを取得できます。

使用例

<!DOCTYPE html>
<html>
<body>

<input id="user" type="text" value="山田" maxlength="10" autocomplete="off">


<script>
// onkeydownイベント
document.getElementById("user").onkeydown = function(e) {
      // Enterキーのイベント
     if(e.key ==="Enter"){
       console.log("Enterキーが押されました");
       return false;
     }
     //Backspaceキーのイベント
      if (event.key === "Backspace"){
          console.log("Backspaceキーが押されました");
          return false;
      }
}
</script>

</body>
</html>

実行結果

テキストボックスに「Enterキー」を入力すろと、onkeydownイベントが発生します。
コンソールに「Enterキーが押されました」というメッセージが表示されます。
テキストボックスに「Backspaceキー」を入力すろと、onkeydownイベントが発生します。
コンソールに「Backspaceキーが押されました」というメッセージが表示されます。

 

JavaScript

Posted by arkgame