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

以上で完了です。

まとめ

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

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

Ads

関連記事

HTMLCSS プログラミング

CSSで画像の高さを一律にそろえる方法【結論:object-fitを使えば簡単です】

更新日:2021.01.08
966
WordPress プログラミング

ワードプレスのエディタで自動整形機能を無効・停止する方法

2020.05.20
80
プログラミング

【簡単】サイトからファビコンを取得・保存・ダウンロードする方法

更新日:2020.05.16
2930
WordPress プログラミング

【wordpress】先頭固定記事かどうかを判別して条件分岐する方法

2021.10.26
15