免責事項
※この記事は著者の実務経験とHTML仕様をもとに執筆し、文章整形にはAIのサポートを利用しています。内容に誤りがあればご指摘いただけると助かります。
はじめに
日常的にフォームを扱っていると、「Enterキーを押しただけなのに検索処理が勝手に動いた」という現象に出会うことがあります。
私も業務システムの改修中に、テキストエリアでEnterを押した瞬間に検索ボタンのイベントが発火するという事象に直面しました。
初めは JavaScript の想定外イベントかと思ったのですが、調査を進めるとこれは HTML仕様に基づいた正しい挙動でした。
この記事では、その理由と対策を整理します。
Enterキーで検索が動いたときの状況
具体的には次のような流れでした。
① 画面には検索条件を入力するテキストエリアと検索ボタンがある
② ユーザーがテキストエリアに検索条件を入力
③ inputエリアからフォーカスを外す感覚で Enterキーを押下
→検索ボタンの検索処理が発火した
原因：HTMLには“default submit button”がある
調査の結果、原因は HTMLフォームの仕様にありました。
HTMLの < form > には、“default submit button” という概念があります。
具体的には、次のようなボタンがdefaultボタンとして扱われます。
• 画面要素の先頭に登場するsubmitボタン
たとえば、このコードの場合：
<form>
<button id="searchBtn">検索</button>
<textarea></textarea>
</form>
この< button >は type を指定していないため、
HTML仕様上 暗黙的に < button type="submit" > とみなされます。
さらに、それがフォーム内の「最初のボタン」なので default submit button に選ばれます。
⸻
Enterキー → defaultボタンを押した扱いになる
HTMLには次の仕様があります。
フォーム内のテキスト入力欄（input/textarea）で Enter を押すと、
default submit button が自動的にクリックされた扱いになる。
つまり、
• ユーザー：ただ改行・フォーカスアウトしたいだけ
• ブラウザ：送信したい（submitしたい）
• default ボタン：検索ボタン
という構造が成立していたわけです。
そのため、Enterキーで検索処理が勝手に発火する現象が起こってしまいました。
正しい対策：ボタンには必ずtypeを書く！
本来の対策としては、明示的に type="button" を指定します。
そして検索処理は JavaScriptのイベントハンドラで制御します。
これでボタンは submitとして扱われなくなるため、Enterキーで自動送信されることもありません。
フォームを扱う際には “button はデフォルトで submit になる” という仕様を忘れずに、type を明示的に記述することが大切です。
⸻
実務での修正はどのように行ったか
しかし現場では「全ボタンを修正できない」状況もあります。
今回の業務では、同様の動きをするボタン全てにtype=buttonを設定して修正するにはリスクが高いという判断になりました。（エンドユーザーの使用方法を鑑みても、発生しうるケースは少ないという結論になりました。）
そのため、今回は簡易的な手段を取りました。
実際に採った回避策："hidden属性のダミーボタン"を先頭要素に置く
フォーム要素の先頭に、hidden属性かつクリックイベントを持たないsubmitボタンを追加しました。
これが defaultボタンとして認識されるため、textareaやinputでEnterキーを押しても、画面の検索イベントは発火しない
という状態を実現できました。
既存画面の広範囲を修正する必要がなく、
影響の少ない安全な回避策として有効でした。
⸻
まとめ
今回の問題は、HTMLフォームの次の仕様が原因でした。
• < button > は type を省略すると submit になる
• フォーム内先頭に現れた submit が default ボタンになる
• テキスト入力中の Enter で default ボタンが発火する
対策としては、
• ボタンはtype=buttonを指定する
方法が理想的です。（初歩的な話ですが……）
同じように「Enterだけで送信されてしまう」問題に悩んでいる方の参考になれば嬉しいです。
参考にした記事