jQuery お問い合わせフォーム等、エンターで勝手に送信させないようにする方法

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。Toshikuraです。今回のTipsは【jQuery お問い合わせフォーム等、エンターで勝手に送信させないようにする方法】です。フォーム入力中に文字変換等でエンターを押す事が有りますがミスしてしまい何度かエンターを押すと勝手にサブミットされてしまいます。記入履歴が残れば良いのですが最初から…になる事も多い為、若干不親切かと思われますのでここで解決方法をメモしておきます。

フォームの使いやすさやデザイン性を向上させる33の方法

これまで何回かに分けてWEBフォーム関連の記事を書いてきましたがフォームの使いやすさやデザイン性を向上させる33の方法としてまとめました。お問い合わせや資料請求等、フォームの最適化ができれば少なからず成果に直結するのではないかと思います。興味がございましたらぜひ。

26. 実装方法

実装方法は至ってシンプルです。下記JSを記述するだけです。
　
JS


$(function() {
	$("input:text").keypress(function(e) {
		if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
			return false;
		} else {
			return true;
		}
	});
});

読み込み


<script src="js/jquery-1.9.0.min.js"></script>

注意事項
本方法でエンターによる送信は止められますが、通常送信手段の一つでもありますので理由が無い場合はお勧めしません。

以上になります。デモでは今回のTipsを実装したサンプルが見れますので合わせてご確認ください。