javascript(jQuery):ページ離脱時にアラートを出す方法
公開日:
:
最終更新日:2014/07/30
javascript
申し込みフォームなどの情報を入力する画面で、途中まで入力したけどうっかり戻ったら入力内容がなくなってしまった。などということがあるかと思います。再度入力するのは面倒だからやっぱりやめた、となってしまうとサイト運営側からすると大変損失なので、防ぐ方法の一つとして入力中の情報がある場合にページ離脱時にアラートを表示させる方法を掲載します。
実装方法
ページ離脱のアクションを拾う
$(function(){ $(window).on('beforeunload', function() { return "ページを閉じようとしています。\n 入力した情報が失われますがよろしいですか?"; }); });
このように記載するとページ離脱時にreturnに記載した文字列で警告が表示されます。
情報が入力されている場合のみ警告を表示する
上記の方法だと、まだ何も入力していなかったとしても警告が表示されてしまいますので、フォームに何かしら入力が合った場合のみ警告が出るようにします。
$(function(){ changeFlg = false; $(window).on('beforeunload', function() { //変更がある場合のみ警告をだす if (changeFlg) { return "ページを閉じようとしています。\n 入力した情報が失われますがよろしいですか?"; } }); //フォームの内容が変更されたらフラグを立てる $("form input, form textarea, form select").change(function() { changeFlg = true; }); })
特定のボタンクリック時は表示させないようにする
上記のままだと、「入力⇒確認⇒完了」の様な順序で登録をする場合に、次のページに進む際にも警告が表示されてしまいます。これを回避するためには次のようにします。
$(function(){ changeFlg = false; $(window).on('beforeunload', function() { //変更がある場合のみ警告をだす if (changeFlg) { return "ページを閉じようとしています。\n 入力した情報が失われますがよろしいですか?"; } }); //フォームの内容が変更されたらフラグを立てる $("form input, form textarea, form select").change(function() { changeFlg = true; }); //特定のボタンが押された場合はフラグを落とす $("input[type=submit]").click(function() { changeFlg = false; }); });
submitをクリックした場合はフラグがfalseになるのでページ遷移しますが警告は出なくなります。
submitアクションを補足すると入力内容のチェックとかもできるので、またの機会に掲載したいと思います。
ad_right_top
関連記事
-
-
javascript:変数(オブジェクト)の型を確認する方法
プログラムを書いていると変数の型によって処理を分岐させるなど、変数の型を取得したい場合がでてきます。
-
-
javascript(jQuery):指定位置までスクロールする方法
jQueryを使用して指定位置までスクロールする方法です。htmlのid指定でリンクをすると瞬時にペ
-
-
javascript(jQuery):scrollTopを使用する際の注意点
scrollTopを使用するとブラウザのスクロール上部の位置を取得できますが、ブラウザによって少し挙
-
-
javascript(jQuery):変数の型を確認する方法
前回、javascriptで変数(オブジェクト)の型を判定する方法を掲載しましたが、今回はjQuer
-
-
javascript:配列の要素を連結して文字列として出力
phpで配列の要素を連結して出力する方法を掲載したので、ついでにjavascriptでの方法も掲載し
-
-
javascript(jQuery):submit時に処理を実施
jQueryを使用してsubmit時に処理を行う方法です。入力内容のチェック処理などは、サーバー側で
Comment
[…] 変損失なので、防ぐ方法の一つとして入力中の情報がある場合にページ離脱時にアラートを表示させる方法を掲載します。 [引用元] javascript(jQuery):ページ離脱時にアラートを出す方法 […]