javascript 矢印キーの入力を取得する

作成日 2023.01.06
javascript
javascript

javascriptで、矢印キーの入力を取得するサンプルコードを記述してます。「keyCode」を使用する方法と「code」を使用する方法があります。「code」を使用したほうが直感的にわかりやすいと思います。

1. 環境
2. 矢印キーの入力を取得
3. code
4. WASDキー
5. サンプルコード

環境

OS windows11 home
ブラウザ chrome 108.0.5359.99

Javascript サンプル集はこちら

矢印キーの入力を取得

「矢印」キーの「keyCode」は、それぞれ以下となっているのでで、これを使用することで取得することが可能です。
左方向 : 37
上方向 : 38
右方向 : 39
下方向 : 40

document.addEventListener('keydown', function(event) {
  switch (e.keyCode) {
    case 37:
        console.log('left');
        break;
    case 38:
        console.log('up');
        break;
    case 39:
        console.log('right');
        break;
    case 40:
        console.log('down');
        break;
  }
});

実行結果をみると取得されていることが確認できます。

配列を使用すれば、少し簡潔に記述することも可能です。

document.addEventListener('keydown', (e) => {
  let arr= ['left', 'up', 'right', 'down'];  

  if(e.keyCode && e.keyCode>36 && e.keyCode<41) alert(arr[e.keyCode-37]);
});

code

また、以下のように「e.code」から「code」を使用して取得することも可能です。

document.addEventListener('keydown', function(e) {
  switch (e.code) {
    case "ArrowLeft":
        alert('left');
        break;
    case "ArrowUp":
        alert('up');
        break;
    case "ArrowRight":
        alert('right');
        break;
    case "ArrowDown":
        alert('down');
        break;
  }
});

macの場合も同じに取得可能です。（ブラウザはsafariになります）

WASDキー

「WASDキー」も取得刷る場合は、以下のように「ラベル」を追加します。

document.addEventListener('keydown', function(e) {
  switch (e.code) {
    case "ArrowLeft":
    case "KeyA":
        alert('left');
        break;
    case "ArrowUp":
    case "KeyW":
        alert('up');
        break;
    case "ArrowRight":
    case "KeyD":
        alert('right');
        break;
    case "ArrowDown":
    case "KeyS":
        alert('down');
        break;
  }
});

サンプルコード

以下は、
矢印キーが押された時だけの押されたキーが何かを判定して結果を表示する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>mebeeサンプル</title>
    <!-- MDB -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

    <div class="container text-center w-50" style="margin-top:200px">

        <h2><span id="result" class="badge bg-info">結果</span></h2>

    </div>

    <script>

        const checkKey = (e) => {
            switch (e.code) {
                case "ArrowLeft":
                    result.textContent = 'left';
                    break;
                case "ArrowUp":
                    result.textContent = 'up';
                    break;
                case "ArrowRight":
                    result.textContent = 'right';
                    break;
                case "ArrowDown":
                    result.textContent = 'down';
                    break;
            }
        }

        document.onkeydown = checkKey;

    </script>
</body>

</html>

結果が表示されていることが確認できます。