[Enter]キーの押下でフォームの内容が送信されるのを防ぐ方法

まずは、[Enter]キーの押下でフォームの内容が送信されてしまう仕様を無効にした上で、送信用のボタンを別途用意する方法をご紹介いたします。

Step.1 form要素のsubmitイベントを無効にする
入力欄にカーソルが入っている状態(=フォーカスがある状態)で[Enter]キーを押下しても送信されないようにするには、フォームのsubmitイベントでは内容が送信されないようにHTMLとスクリプトを記述します。方法は簡単で、form要素の開始タグを以下のように記述するだけです。
<form onsubmit="return false;" action="***" method="***">
※「***」の部分は既存の記述に合わせて下さい。

ここでは、form要素にonsubmit属性を加え、その値に「return false;」と記述しています。こうすると、[Enter]キーが押下されてsubmitイベントが呼び出されても何も実行されなくなるため、フォームの内容は送信されなくなります。

上記の記述だけだと、「送信ボタン」をクリックしてもフォームの内容が送信されなくなってしまいます。 それでは困りますので、送信を実行するボタンを別途用意します。

Step.2 送信用のボタンを作る
一般的に、フォームの内容を送信するためのボタンは、以下のようにinput要素のtype属性に値「submit」を指定することで作ります。
<input type="submit" value="送信する">
しかし、この方法で作った送信ボタンでは、もはやフォームの内容は送信されません。なぜなら、このボタンの機能は「フォームのsubmitイベントを実行するだけ」であり、先ほどのStep.1で記述した内容によってsubmitイベントではフォームの内容は送信されなくなったからです。

そこで、以下のように記述して代わりの送信ボタンを作ります。
<input type="button" value="送信する" onclick="submit();">
type属性の値に「submit」ではなく「button」を指定すると、送信ボタンではない普通のボタンが作れます。そして、onclick属性の値に「submit();」と記述して、フォームの内容を送信するためのsubmit関数を実行するようにします。このように記述すると、このボタンをクリックしたときにだけフォームの内容が送信されるようになります。

※上記のようにsubmit関数を実行した場合は、form要素のsubmitイベントは発生しない仕様なので、form要素のonsubmit属性内に記述した「return false;」のスクリプトは実行されません。そのため、フォームに入力された内容は問題なく送信できます。

ソースのまとめと表示例
上記のStep.1~2のソースをまとめると以下のようになります。
<form onsubmit="return false;" action="***" method="***">
   入力欄1:<input type="text" name="st1" value="" size="25"><br>
   入力欄2:<input type="text" name="st2" value="" size="25"><br>
   入力欄3:<input type="text" name="st3" value="" size="25"><br>
   <input type="button" value="送信する" onclick="submit();">
</form>
このソースを表示すると、以下のようになります。
入力欄1:
入力欄2:
入力欄3:
 
上記のサンプルでは、入力欄の中にカーソルを入れた状態で[Enter]キーを押してもフォームの内容は送信されません。「送信する」ボタンをクリックした場合にだけ送信されます。

※[Tab]キーなどを使ってフォーカスを「送信する」ボタンに移動した場合は、[Enter]キーの押下で送信されます。その場合の[Enter]キーは、ボタンのクリックと同じ効果になるからです。

下記のように入力欄が1つだけの場合でも、[Enter]キーの押下では送信されなくなります。
入力欄:  
ただし、入力項目が1つだけで、入力を求めている内容が短い文字列の場合は、[Enter]キーの押下で送信できる方が便利かもしれませんので注意してください。

次に、[Enter]キーの押下で送信する仕様は有効のままで、送信前に確認ダイアログを表示することで、誤送信を防ぐ方法をご紹介いたします。