Enterキーでフォームが誤送信されるのを防ぐ方法

[Enter]キーでフォームの内容が送信されてしまうと困る場合もある

フォームの入力欄にカーソルが入っている状態(＝フォーカスがある状態)で[Enter]キーを押すと、フォームの内容が送信されることがあります。これは、[Enter]キーの押下が「フォームの送信ボタンを押す操作」と同じように扱われる場合があるためです。

検索窓などのように1項目しか入力欄がない場合ならこの仕様は便利でしょう。しかし、入力欄が複数個あって、未入力項目が残っている状況で送信されてしまうと困ります。

下記に、[Enter]キーだけで送信されてしまう入力フォームの例を2つご紹介いたします。

■[Enter]キーの押下で、送信ボタンを押したことになる例：
下記に掲載した3つのテキスト入力欄のうち、どれか1つをクリックして入力欄内にカーソルを入れた後、キーボードの[Enter]キーを押してみてください。少なくとも代表的なブラウザでは、下部に用意された「送信する！」ボタンをクリックしなくても、[Enter]キーを押すだけで入力内容が送信されます。 ※この例では、フォームの内容が送信されても本記事内のダミーページ(4ページ目)に飛ぶだけなので、入力した内容はどこにも記録されません。

■送信ボタンがなくても、[Enter]キーでフォームの内容が送信される例：
下記のフォームには送信ボタンがありません。それでも入力欄にカーソルが入っている状態で[Enter]キーを押せば、その内容が送信されます。 このような「送信ボタンのないテキスト入力欄」は、サイト内検索機能などに使われる検索窓(＝検索語の入力欄)としてよく見かけます。
 

[Enter]キーで送信される場合・送信されない場合

キーボードの[Enter]キーを押しただけで送信されるかどうかは、代表的なブラウザの場合は以下のように決定されています。
 

• テキスト入力欄が1つで、送信ボタンがある場合： [Enter]キーを押すと送信される
• テキスト入力欄が複数で、送信ボタンがある場合： [Enter]キーを押すと送信される
• テキスト入力欄が1つで、送信ボタンがない場合： [Enter]キーを押すと送信される
• テキスト入力欄が複数で、送信ボタンがない場合： [Enter]キーを押しても無反応

※上記は、Edge・IE・Firefox・Chrome・Operaの本稿執筆時点での各最新版をWindows10上で確認した結果です。なお、本稿初版の2008年時点では、Opera・Safariでは上記の4通りすべての場合で送信されていました。すべてのブラウザが上記のように動作するとは限りません。
 

日本語入力環境では[Enter]キーが頻繁に押されるため、意図せず送ってしまう可能性が高い

入力内容が日本語の場合、漢字変換の確定のために[Enter]キーを頻繁に押す可能性があります。 このとき、[Enter]キーの押下でフォームの内容が送信される仕様だと、勢い余って[Enter]キーを押しすぎてしまうだけで誤送信されてしまいます。

そこで、[Enter]キーを押してもフォームの内容が送信されてしまわないようにしてみましょう。本記事では、[Enter]キーでの送信を無効にした上で、送信用のボタンを別途用意する方法と、送信する前に確認ダイアログを表示する方法の2通りをご紹介いたします。
 

• p.2 [Enter]キーを押しても送信されないようにする方法
• p.3 送信する前に確認ダイアログを表示する方法