Enterキーでフォームが誤送信される

フォームの入力欄にカーソルが入っている状態で 「 Enter 」キーを押すと、フォームの内容が送信されることがあります。

「 Enter 」キーを押すと送信されるかどうかは以下のようなケースが考えられます。ブラウザによってはほかにも該当するものがあるかもしれません。

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

ただし、form 内に input が複数あるが「 type='hidden' 」だったり、片方が「 textarea 」の場合は、Enterキー押下で submit されます。

Enterキーの押下でフォームの内容が送信されないようにするに次のようにします。

• form要素のsubmitイベントを無効にする
• 送信用のボタンを作る

form 要素の submit イベントを無効にする

submitイベントを無効にして、inputタグのtype属性の値を「 button 」にします。

inputタグを送信ボタンにするに為、クリックするとsubmitするように指定します。

putタグを送信ボタンにするに為、クリックするとsubmitするように指定します。

<form onsubmit="return false;" action="" method="">
   名前：<input type="text" name="name" value="太郎">
   <input type="button" value="送信する" onclick="submit();">
</form>