javascript tabキーの入力を取得する

作成日 2022.07.14
更新日 2022.12.13
javascript
javascript

javascriptで、tabキーの入力を取得するサンプルコードを記述してます。「tab」には「keyCode」が「9」としてあたっているので、これを利用して取得します。「code」を使用して取得刷ることも可能です。

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

環境

OS windows11 home
ブラウザ chrome 108.0.5359.99

Javascript サンプル集はこちら

tabキーの入力を取得

「tab」キーの「keyCode」は「9」なので、これを利用することで取得することが可能です。

<input type="text" id="txt1" />
<input type="text" id="txt2" />
<input type="text" id="txt3" />

<script>

    document.addEventListener("keyup",

        function (e) {
            if (e.keyCode == 9) {
                console.log("tabが押されました");
            }
        }

    );

</script>

実行結果をみると「Shift」＋「tab」も取得されていることが確認できます。

macでも同様の動作であることが確認できます。（ブラウザはsafariを使用してます）

code

「code」を使用して取得することも可能です。こちらの方が、コードの可視性は高いです。

<input type="text" id="txt1" />
<input type="text" id="txt2" />
<input type="text" id="txt3" />

<script>

    document.addEventListener("keyup",

        function (e) {
            if (e.code === "Tab") {
                console.log("tabが押されました");
            }
        }

    );

</script>

サンプルコード

以下は、
tabキーで移動したタグ名を取得して表示するだけの
サンプルコードとなります。

※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>

    <form name="frm">
      <input type="text" id="txt1" class="form-control w-25 mx-auto" />
      <a href="">aタグ</a>
      <input type="text" id="txt2" class="form-control w-25 mx-auto" />      
    </form>

  </div>

  <script>

    document.addEventListener("keyup",

      function (e) {
        if (e.keyCode == 9) {
          result.textContent = document.activeElement.tagName.toLowerCase();
        }
      }

    );

  </script>
</body>

</html>

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