form（フォーム）タグでエンターキー送信を無効にする方法
お問い合わせ・見積フォームで、テキストボックス内に文字を入れてエンターキーを押すと勝手に送信処理されてしまう。
エンターキーで送信されるのを無効にしたい。
このような悩みを解決します。
本記事では、formタグ内のhtmlを編集してエンターキーで送信される処理を無効化する方法について解説致します。
送信ボタンのtype属性でsubmitを使わない
<form action="">
<input type="text">
<input type="text">
<button type="button" onclick="submit();" value="送信"></button>
</form>
送信ボタンのhtmlタグのtype属性にsubmitを使っていませんか？
こちらをbuttonに変える事でエンターキーを押しても送信されなくなります。
テキストボックスを増やす
<input type="text" name="dummy" style="display:none;">
フォーム内にテキストボックスが一つしか無かった場合、前章でtype属性をbuttonに変えても送信処理されてしまいます。
その場合はダミーでtextボックスを増やしましょう。
style属性でdisplay: none;を指定してやれば、サイトの見た目上表示されなくなります。
以上で完了です。
まとめ
必須項目を入れないとエラーで送信できないフォームなどはテキストボックスの位置などで問題ないかもしれませんが、特にない場合は本記事の内容が役立つかと思います。
以上で解説を終わります。
目次
