HTMLのフォームは、送信ボタン（<button type="submit">）をクリックするだけでなく、暗黙の送信手段による送信もサポートされています。大抵のウェブブラウザでは、フォームの入力欄（inputやtextarea）でEnterキーを押すことで、送信ボタンを押さなくても送信できる挙動をサポートしており、これが暗黙の送信に該当します。

この記事では、理由はともかく、フォームの送信（submitイベント）がEnterキーによって起きた（暗黙の送信）のか送信ボタンを押したことで起きたのかを判定したい人に向けてその方法を伝授します。

TL;DR

暗黙の送信用の見えない送信ボタンと、ユーザーが押す用の見える送信ボタンを用意しましょう。

解説

Enterキーのような方法による暗黙の送信は、実際には「そのフォームのdefault buttonに対してclickイベントを発生させる」という機構によって発生しています。

そして、実はフォームは複数の送信ボタンを持つことができ、その場合にどの送信ボタンが押されたのか判別できる仕組みを持っています。

これを組み合わせることで、暗黙の送信で押されるボタン（default button）と、ユーザーが明示的に押すボタンを別々にすることで、どちらのボタンが押されたのか判別することができます。

実際のHTMLはこのようにします。

<form onsubmit="handleSubmit(event)">
  <p><input placeholder="入力欄でEnterを押して送信"></p>
  <button hidden type="submit" name="enter"></button>
  <p><button type="submit" name="submitbutton">送信ボタン</button></p>
</form>

ポイントは、type="submit"のボタンが2つあることです。お察しのとおり、1つが暗黙の送信用で、もう1つがユーザーに見える送信ボタンです。暗黙の送信用は見えなくてもいいのでhidden属性がついています。

暗黙の送信時に使われるdefault buttonは「そのフォームに属する最初の送信ボタン」であると定義されているので、ユーザーに見える送信ボタンよりも前に配置することでこちらがdefault buttonになります。

送信時（submitイベントの処理）はこのように書きます。

function handleSubmit(event) {
  event.preventDefault();
  // event.submitterに送信ボタンの要素が入っている
  const submitterName = event.submitter.name;
  alert(`submit ${submitterName}`);
}

ポイントは、event（SubmitEvent）のsubmitterプロパティであり、どの送信ボタンが押されたのかを得ることができます。

今回はどの方法で送信されたのかをalertで表示することにしました。次のように、入力欄でEnterを押した場合と送信ボタンを押した場合で異なる内容が表示されます（Google Chromeで確認）。

入力欄でEnterを押した場合:

送信ボタンを押した場合:

これで、フォームがEnterキーで送信されたのか送信ボタンのクリックで送信されたのかを判別することができました。

実際に試すことができるCodePenも用意しました。挙動を確かめてみましょう。

See the Pen Untitled by uhyo (@uhyo) on CodePen.

なお、このテクニックを使用する場合はアクセシビリティにも気を付けてください。上記のHTMLのように前者をhidden属性で隠していれば大丈夫のはずですが、HTML上2つの送信ボタンを配置することになるため、支援技術のユーザーから無駄に送信ボタンが2つ見えるといった状態は避けるようにしましょう。

また、この記事ではクライアントサイドでの判別方法を説明しましたが、formの送信をクライアント側で止めずにサーバーへリクエストを送るという場合でも、サーバー側でどの送信ボタンが押されたのかを判別することができます（詳細は省略）。

結論

フォームの送信方法を判別したい機会はあまり無いと思いますが、もしあった場合はこの記事を参考にしてください。