(HTML,CSS,JavaScript)Enterキーでフォームが誤送信されるのを防ぐ方法Enterキーによる誤送信を防ぐ方法や設定はあるのでしょうか。Enterキーを押してもフォームの内容が送信されないようにする方法と、送信する前に確認ダイアログを表示する方法の2通りをご紹介いたします。文宏ホームページ作成ガイド[Enter]キーでフォームの内容が送信されてしまうと困る場合もある入力の途中でも[Enter]キーを押すと送信されてしまうフォームの入力欄にカーソルが入っている状態(=フォーカスがある状態)で[Enter]キーを押すと、フォームの内容が送信されることがあります。これは、[Enter]キーの押下が「フォームの送信ボタンを押す操作」と同じように扱われる場合があるためです。検索窓などのように1項目しか入力欄がない場合ならこの仕様は便利でしょう。入力欄が複数個あって、未入力項目が残っている状況で送信されてしまうと困ります。下記に、[Enter]キーだけで送信されてしまう入力フォームの例を2つご紹介いたします。■[Enter]キーの押下で、送信ボタンを押したことになる例:下記に掲載した3つのテキスト入力欄のうち、どれか1つをクリックして入力欄内にカーソルを入れた後、キーボードの[Enter]キーを押してみてください。少なくとも代表的なブラウザでは、下部に用意された「送信する!」ボタンをクリックしなくても、[Enter]キーを押すだけで入力内容が送信されます。入力欄1:入力欄2:入力欄3:※この例では、フォームの内容が送信されても本記事内のダミーページ(4ページ目)に飛ぶだけなので、入力した内容はどこにも記録されません。■送信ボタンがなくても、[Enter]キーでフォームの内容が送信される例:下記のフォームには送信ボタンがありません。それでも入力欄にカーソルが入っている状態で[Enter]キーを押せば、その内容が送信されます。入力欄:このような「送信ボタンのないテキスト入力欄」は、サイト内検索機能などに使われる検索窓(=検索語の入力欄)としてよく見かけます。[Enter]キーで送信される場合・送信されない場合キーボードの[Enter]キーを押しただけで送信されるかどうかは、代表的なブラウザの場合は以下のように決定されています。※上記は、Edge・IE・Firefox・Chrome・Operaの本稿執筆時点での各最新版をWindows10上で確認した結果です。本稿初版の2008年時点では、Opera・Safariでは上記の4通りすべての場合で送信されていました。すべてのブラウザが上記のように動作するとは限りません。日本語入力環境では[Enter]キーが頻繁に押されるため、意図せず送ってしまう可能性が高い入力内容が日本語の場合、漢字変換の確定のために[Enter]キーを頻繁に押す可能性があります。このとき、[Enter]キーの押下でフォームの内容が送信される仕様だと、勢い余って[Enter]キーを押しすぎてしまうだけで誤送信されてしまいます。そこで、[Enter]キーを押してもフォームの内容が送信されてしまわないようにしてみましょう。本記事では、[Enter]キーでの送信を無効にした上で、送信用のボタンを別途用意する方法と、送信する前に確認ダイアログを表示する方法の2通りをご紹介いたします。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。