【ホームページ作成】Enterキーで送信されてしまうのを防ぐ

[Enter]キーでフォームの内容が送信されるのを防ぐ記述

《STEP.1》onsubmitイベントを無効にする

入力欄にカーソルが入っている状態（＝フォーカスがある状態）で[Enter]キーを押下しても送信されないようにするには、フォームのonsubmitイベントで内容が送信されないようにHTMLとスクリプトを記述します。
方法は簡単で、formタグを以下のように記述するだけです。

<form action="***" method="***" onsubmit="return false;">

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

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

《STEP.2》送信用のボタンを作る

通常、フォームの内容を送信するためのボタンは、以下のように記述します。（input要素のtype属性に値「submit」を指定します）

<input type="submit" value="送信する">

しかし、この方法で作った送信ボタンでは、（先ほどのSTEP.1で記述した内容によって）フォームの内容は送信されません。 そこで、以下のように記述して代わりのボタンを作ります。

<input type="button" value="送信する" onclick="submit();">

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

以上で完成です。
ソースをまとめると以下のようになります。

<form action="***" method="***" onsubmit="return false;">
   入力欄１：<input type="text" name="st1" value="" size="25"><br>
   入力欄２：<input type="text" name="st2" value="" size="25"><br>
   入力欄３：<input type="text" name="st3" value="" size="25"><br>
   <input type="button" value="送信する" onclick="submit();">
</form>

表示すると、以下のようになります。

上記のサンプルでは、入力欄の中にカーソルを入れた状態で[Enter]キーを押下しても、フォームの内容は送信されないはずです。 「送信する」ボタンをクリックした際にだけ、送信されます。
※上記サンプルの場合は、『input要素のtype属性値に「submit」を指定して作った「送信ボタン」』は存在せず、かつ『入力項目が複数個ある』ため、今回ご紹介した方法を使わなくてもIEとFirefoxでは元々[Enter]キーでは送信されません。

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

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

おわりに

今回は、入力中に誤って[Enter]キーを押下することで、入力内容を誤送信してしまわないようなフォームを作る方法をご紹介いたしました。 入力項目数の多いフォームなどに活用すると便利かも知れません。