[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>このソースを表示すると、以下のようになります。
※[Tab]キーなどを使ってフォーカスを「送信する」ボタンに移動した場合は、[Enter]キーの押下で送信されます。その場合の[Enter]キーは、ボタンのクリックと同じ効果になるからです。
下記のように入力欄が1つだけの場合でも、[Enter]キーの押下では送信されなくなります。
次に、[Enter]キーの押下で送信する仕様は有効のままで、送信前に確認ダイアログを表示することで、誤送信を防ぐ方法をご紹介いたします。
