【jQuery】アラートでページ離脱防止をしよう

せっかくサイトに訪問してくれた人が、フォーム入力の際にページ離脱してしまうと、サイト運営側としては困りますよね。

そこで今回は、アラートを使ってページ離脱を防ぐ方法をお伝えします（PCでこの記事を読んでいる方は試しにリロードをしてみてください。アラートが表示されます）。

実装方法

こちらを用意します。

jQuery

$(function(){
	$(window).on('beforeunload', function(){
		return 'ページを閉じてもよろしいですか？';
	});
	$('button[type=submit]').on('click', function(){
		$(window).off('beforeunload');
	});
});

jQueryの詳細

ではここからはjQueryの内容を1行ずつ説明していきます。

2から4行目

beforeunloadというイベントを使って、ページが更新されそうになった時にメッセージを表示させます。

jQuery

$(window).on('beforeunload', function(){
	return 'ページを閉じてもよろしいですか？';
});

5から7行目

このままだと送信ボタンを押してもアラートが表示されてしまい、流石にそれはサイトに訪れた方に煩わしく感じさせてしまうので、送信ボタンのクリック時だけbeforeunloadイベントを無効にします。

jQuery

$('button[type=submit]').on('click', function(){
	$(window).off('beforeunload');
});

まとめ

いかがでしたでしょうか。

必須とまでは言いませんが、ユーザビリティを考えるとやはり入力フォームページには離脱防止はあった方が良さそうですね。