Written by Kasumi

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;を指定してやれば、サイトの見た目上表示されなくなります。

以上で完了です。

まとめ

必須項目を入れないとエラーで送信できないフォームなどはテキストボックスの位置などで問題ないかもしれませんが、特にない場合は本記事の内容が役立つかと思います。

以上で解説を終わります。

目次

関連記事

プログラミング

URLにパラメータが付与されてる場合のアンカーリンク作成方法

2022.08.02
3795
HTMLCSS

【CSS】指定したセレクタの子要素全てに対してプロパティを適用する方法

2023.04.20
2091
HTMLCSS

【コピペ用】CSSでへこむボタンを作成する方法

2022.06.11
3295
WordPress プログラミング

【Contact Form 7】Form data to kintoneでkintone側に二重送信されるのを防ぐ【確認画面が原因】

2022.03.17
1289