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

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

JavaScriptを使えば、テキスト入力欄の中で「Enter」キーが押された瞬間にボタンのクリックイベントを発火させることができます。フォームの送信や検索処理などでよく使われるテクニックです。本記事では、具体的な実装方法をサンプルコード付きでわかりやすく解説します。

基本の仕組み

キーボード操作を検知するには、対象の入力欄にaddEventListener()でkeyupイベントを登録します。イベントオブジェクトのkeyCodeが「13」(Enterキーを表すキーコード)と一致した場合に、ボタンのclick()メソッドを呼び出すことで、実際にクリックした場合と同じ動作を実現できます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Enterキーでボタンをクリックする例</title>
</head>
<body>
<h1>Enterキーでボタンクリックをトリガーする例</h1>
<input id='inputField' value='何か入力してください..' />
<button id='alertBtn' onclick='showAlert()'>Button</button>
<p>上記の入力欄内で「Enter」キーを押すと、ボタンのクリックが発生します。</p>
<script>
  function showAlert() {
    alert('ボタンがクリックされました');
  }

  var inputText = document.getElementById('inputField');
  inputText.addEventListener('keyup', function(event) {
    if (event.keyCode === 13) {
      event.preventDefault();
      document.getElementById('alertBtn').click();
    }
  });
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

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

入力欄に文字を入力してEnterキーを押すと、ボタンがクリックされたことになり、アラートダイアログが表示されます。

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

コードのポイント

1. keyupイベントの監視

getElementById()で取得した入力要素にkeyupイベントリスナーを登録することで、ユーザーがキーを離したタイミングで処理を実行できます。

2. keyCode === 13 による判定

「13」はEnterキーを表すキーコードです。event.preventDefault()を呼び出すことで、意図しないフォーム送信などブラウザのデフォルト動作をキャンセルしています。

3. click()メソッドでクリックを発火

document.getElementById('alertBtn').click()により、プログラム側からボタンのクリックイベントを発生させています。

補足：より現代的な書き方

keyCodeは現在では非推奨(Deprecated)となっているため、今後の開発ではevent.keyを使った以下の書き方が推奨されます。

inputText.addEventListener('keyup', function(event) {
  if (event.key === 'Enter') {
    event.preventDefault();
    document.getElementById('alertBtn').click();
  }
});

この書き方ならキーコード番号を覚える必要がなく、コードの可読性も大きく向上します。

  1. JavaScriptでボタンクリック時にli要素を削除する方法

    Webアプリケーションでは、リスト項目を動的に削除できるようにしたいケースはよくあります。この記事では、各要素（li）に配置した「削除」ボタンをクリックすることで、該当する要素をJavaScriptだけで削除する方法を解説します。 前提：対象となる順序なしリスト（ul） 例として、次のような順序なしリスト（ul）を想定します。 <ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <

  2. JavaScriptでボタンクリック時に名前を追加・削除する方法をわかりやすく解説

    要素を新しく作成するには add() メソッドを使用し、作成・追加済みの要素を削除するには remove() メソッドを使用します。本記事では、テキストボックスに入力した名前をボタンクリックでリストに追加し、各項目の「Remove Name」ボタンで削除できるシンプルなアプリを例に、その実装方法を解説します。 実装例（サンプルコード） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view