ちょっと良いUIおれおれAdvent Calendar 2024 – 11日目

普通にフォームをマークアップすれば Enter キーで送信できるようになるんですが、なんかそうなってない場合があります。しときましょう。

デモ：

<form> で括る

Enter キーで送れるようにするには、単に <form> 要素で括るだけです。簡単です。やらない理由がない。

JavaScript からは submit イベントを使う

ボタンのクリックではなくフォーム送信 submit のイベントを使います。ボタンはイベント管理する必要ありません。

JS で全部管理する場合は HTML レベルでの送信を event.preventDefault() で止めます。

逆に送信しないボタンは type="button" にする

フォーム内のボタンは勝手に送信ボタン化します。抑制したい場合は type="button" を与えて、送信しないよって明示する必要があります。ちなみに送信の明示は type="submit" です。

FormData で入力値をまとめて取る

ちなみに DOM としてフォーム全体の入力値をまとめて取るには FormData が便利です。

const form = document.querySelector('form');
const formData = new FormData(form);
for (const [name, value] of formData.entries()) {
  console.log(name, value);
}

チェックボックスのように同じ name が複数あるものかどうかは自分で判断する必要があります。まあ些事ですが。

おしまい

Enter キー使えないと不便なんでよろしくお願いします。誤送信が怖いときは確認画面出したり JS で確認出したりしてください。

参考