フォーム画面から離れる際にJavaScriptで警告を表示する方法

4661 Views
2017年09月19日 JavaScript

お問い合わせフォームを入力中に5ボタンマウスやトラックパッドを使用している方は間違えてページバック（戻る）を行ったことある方、多いのではないでしょうか。

今回は製作者のちょっとした心遣いで誤操作を防止できるのでそんな方法をご紹介。

SNSでシェア♪

心遣いの内容

通販などで買い物中にページバックや閉じるなどの作業をすると
「このページを離れてよろしいですか？」
などのアラートを見たことはないでしょうか？

アラートが表示されるということはjavascriptが動いているということです。

なので、今回はこれを自身が制作するホームページに簡単に実装したいと思います。

実装内容

以下の内容で実装を行いたいと思います。

・フォームに内容が入力操作がされていて、ページバックが行われた際にアラートを表示
・入力操作が行われていなかったらアラートは表示させない
・検索フォームなどで作動すると厄介なので実行したいフォームに「pageback」のクラスをつける

以上の内容で実装したいと思います！

プログラム

$.event.add(window, "load", function() {
	//フォームの戻る防止
	if ($("form.pageback").length > 0) {
		$("input, textarea, select").on("keyup change", function(){
			$(window).on("beforeunload", function() {
				return "このページを離れると入力したデータが削除されます。";
			});
		});
		$("a, input[type=submit]").on("click", function(e) {
			$(window).off("beforeunload");
		});
	}
});

$.event.add(window, "load", function() {

//フォームの戻る防止

if ($("form.pageback").length > 0) {

$("input, textarea, select").on("keyup change", function(){

$(window).on("beforeunload", function() {

return "このページを離れると入力したデータが削除されます。";

});

$("a, input[type=submit]").on("click", function(e) {

$(window).off("beforeunload");

});

}

});

※jQuery必須

以上です！