Enter キーでフォームの内容を送信しないようにする - Express

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

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

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

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

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

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

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

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

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