JavaScriptとHTMLでEnterキーでフォームを送信する方法

2024-04-08

JavaScriptとHTMLでEnterキーでフォームを送信する方法

ここでは、JavaScriptとHTMLを使って、Enterキーが押された時にフォームを送信する2つの方法を紹介します。

form要素のonsubmitイベントを使う

この方法は、フォーム全体にイベントリスナーを追加する方法です。

<form onsubmit="return submitForm(event)">
  ...
</form>

function submitForm(event) {
  // フォーム送信前に処理を行う
  // ...

  // フォーム送信を許可する場合はtrue、キャンセルする場合はfalseを返す
  return true;
}

この例では、submitFormという関数をonsubmitイベントに設定しています。この関数は、Enterキーが押された時に呼び出され、以下の処理を行います。

フォーム送信前に処理を行う
フォーム送信を許可する場合はtrue、キャンセルする場合はfalseを返す

return trueを返すとフォームが送信され、return falseを返すとフォーム送信がキャンセルされます。

input要素のonkeydownイベントを使う

<input type="text" onkeydown="submitForm(event)">

function submitForm(event) {
  // Enterキーが押されたか確認
  if (event.keyCode === 13) {
    // フォーム送信前に処理を行う
    // ...

    // フォームを送信する
    event.target.form.submit();
  }
}

Enterキーが押されたか確認
フォームを送信する

注意点

上記の例では、フォーム送信前に処理を行う部分に、バリデーション処理などを記述することができます。
event.target.form.submit()を使う方法では、デフォルトボタンのクリックイベントは発生しません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enterキーでフォームを送信する</title>
</head>
<body>
  <form onsubmit="return submitForm(event)">
    <input type="text" name="name" placeholder="名前">
    <input type="text" name="email" placeholder="メールアドレス">
    <button type="submit">送信</button>
  </form>

  <script>
  function submitForm(event) {
    // フォーム送信前に処理を行う
    // 例：バリデーションチェック

    // フォーム送信を許可する
    return true;
  }
  </script>
</body>
</html>

このコードを実行すると、フォームに入力した名前とメールアドレスが送信されます。

上記のコードを参考に、input要素のonkeydownイベントを使ってEnterキーでフォームを送信するコードも作成できます。

JavaScriptとHTMLでEnterキーでフォームを送信する他の方法

form要素のonsubmit属性を使う

<form onsubmit="return submitForm()">
  ...
</form>

function submitForm() {
  // フォーム送信前に処理を行う
  // ...

  // フォーム送信を許可する場合はtrue、キャンセルする場合はfalseを返す
  return true;
}

この方法は、onsubmitイベントを使う方法とほぼ同じですが、イベントリスナーをJavaScriptファイルではなくHTMLファイルに記述することができます。

input要素のonkeypressイベントを使う

<input type="text" onkeypress="submitForm(event)">

function submitForm(event) {
  // Enterキーが押されたか確認
  if (event.keyCode === 13) {
    // フォーム送信前に処理を行う
    // ...

    // フォームを送信する
    event.target.form.submit();
  }
}

この方法は、onkeydownイベントを使う方法とほぼ同じですが、onkeypressイベントはキーが押された時にのみ発生するため、誤動作を防ぐことができます。

form要素のsubmit()メソッドを使う

この方法は、JavaScriptから直接form要素のsubmit()メソッドを呼び出す方法です。

<form id="myForm">
  ...
</form>

document.getElementById("myForm").submit();

この方法は、他の方法と比べて記述量が少なく、シンプルですが、フォーム送信前に処理を行うことができません。

JavaScriptとHTMLでEnterキーでフォームを送信するには、いくつかの方法があります。それぞれの方法のメリットとデメリットを理解して、状況に合わせて適切な方法を選択してください。

javascript html

JavaScriptとHTMLでEnterキーでフォームを送信する方法