wordpressなど、投稿ページから別のページに遷移しようとしたら、「このページから移動してもよろしいですか」という確認ウィンドウが出てくるから、
かっこ良くていつか実装してみたいと思いました。
調べてみたら、jQueryのbeforeunloadイベントを使って簡単に実現できるようです。
サンプルを見てください。
仕様
inputのテキストボクスに変更があった場合のみ、
「戻る」（実際はプログラミングのカテゴリに遷移する）ボタンを押したら、確認ウィンドウが出てきます。
IE8でもテストOKです。
でもページを閉じようとしても、確認ウィンドウも出てきて、ちょっとうるさいですね。
ソース
ソースコードを簡単に貼ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <html> <head> <title>【jQuery】ページ離脱時に確認メッセージを表示させる方法</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $("input[type=text]").change(function() { $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); $("input[type=submit]").click(function() { $(window).off('beforeunload'); }); }); </script> </head> <body> <h4>投稿</h4> <form method="post" action="beforeunloadchange.html"> <input type="text" value="" /><br> <input type="submit" value="送信" /> <input type="button" value="戻る" onclick="location.href='/programmer'" /> </form> </body> </html> |
