JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでEnterキー押下時にボタンをトリガーする方法

JavaScriptでは、テキストフィールドに入力中にEnterキーが押されたタイミングで、ボタンのクリックイベントを発火させることができます。フォーム送信や検索処理など、ユーザーの操作性を向上させたい場面でよく使われるテクニックです。

Enterキーでボタンをトリガーするには、以下のようなコードを使用します。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .sample,
   .result {
      font-size: 18px;
      font-weight: 500;
      color: red;
   }
   .result {
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>Trigger a button on ENTER key</h1>
Enter text<input type="text" class="sample" />
<button class="Btn">CLICK HERE</button>
<div class="result"></div>
<h3>
上記のテキストフィールド内でEnterキーを押すと、ボタンがトリガーされます
</h3>
<script>
   let resultEle = document.querySelector(".result");
   let sampleEle = document.querySelector(".sample");
   sampleEle.addEventListener("keyup", (event) => {
      if (event.keyCode === 13) {
         event.preventDefault();
         document.querySelector(".Btn").click();
      }
   });
   document.querySelector(".Btn").addEventListener("click", () => {
      resultEle.innerHTML = "Button has been clicked and text = " + sampleEle.value;
   });
</script>
</body>
</html>

実行結果

JavaScriptでEnterキー押下時にボタンをトリガーする方法

入力フィールドに任意のテキストを入力してEnterキーを押すと、以下のように表示されます。

JavaScriptでEnterキー押下時にボタンをトリガーする方法

コードの解説

このコードの仕組みは以下の通りです。

  • keyupイベントの監視： sampleEle.addEventListener("keyup", ...) により、テキストフィールドでキーが離された瞬間に処理が実行されます。
  • Enterキーの判定： event.keyCode === 13 で、押されたキーがEnterキー（キーコード13）かどうかを判定しています。
  • デフォルト動作の無効化： event.preventDefault() を呼び出すことで、フォーム送信などブラウザの既定の動作をキャンセルします。
  • クリックの発火： .click() メソッドを使うことで、ボタンをプログラム的にクリックした状態を作れます。

より現代的な書き方

keyCode は非推奨（Deprecated）となっているため、現在は event.key プロパティを使った次の書き方が推奨されています。

sampleEle.addEventListener("keydown", (event) => {
   if (event.key === "Enter") {
      event.preventDefault();
      document.querySelector(".Btn").click();
   }
});

event.key === "Enter" のように比較することで、キーコード番号を覚える必要がなく、可読性の高いコードになります。状況に応じて keydown イベントと組み合わせて使用するとよいでしょう。

  1. JavaScriptでEnterキーの押下イベント（keypress）を検出する方法

    Webアプリケーションでは、ユーザーがEnterキーを押したタイミングで特定の処理を実行したい場面がよくあります。例えば、検索フォームで入力後に自動で検索を実行したり、チャット画面でメッセージを送信したりするケースです。 JavaScriptでは、onkeypressイベントとEnterキーのキーコード「13」を組み合わせることで、簡単にEnterキーの押下を検出できます。 基本的な実装方法 まず、HTML側のinput要素にonkeypress属性を設定し、キーが押されたときに呼び出す関数を指定します。 onkeypress=yourFunctionName 次に、JavaScript側でイ

  2. JavaScriptでHTMLボタンをクリックしたときにアラートを表示する方法

    ボタンをクリックしたときにアラートを表示するには、JavaScriptのaddEventListener()メソッドを使用します。例として、HTMLページ上に以下のようなボタンが配置されている場合を考えてみましょう。<button type=button>Please Press Me</button>サンプルコード以下は、ボタンがクリックされたときにアラートを表示する完全なコード例です。<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> &