「このサイトを離れますか?」メッセージを表示する方法
フォームの値を変更中にブラウザの閉じるボタンをクリックしたり、ブラウザの戻るボタンをクリックしたときに、「このサイトを離れますか?」メッセージを表示する方法を紹介します。
ただし、ブラウザによってメッセージが違ったり、動作しなかったりする場合があります。
ChromeとIE、Microsoft Edge、Safariでは動作しました。
メッセージを表示する方法
JQueryとbeforeunloadを使うことで表示することができます。
// beforeunloadイベント登録 $(window).on('beforeunload', function(e) { e.preventDefault(); return ''; });
メッセージを消す方法
// beforeunloadイベント削除 $(window).off('beforeunload');
実際に組み込む方法
フォームに変更があった時のみ表示するようにします。
また、サブミットした時は、メッセージを出さないようにします。
また、サブミットした時は、メッセージを出さないようにします。
<form> <input type="text" name="text1" id="text1" value=""><br> <input type="button" value="送信" onclick="onClickSubmit(this.form);"> </form> <script> $(function() { // フォームに変更があった時のみ表示する $("form").change(function(){ // beforeunloadイベント登録 $(window).on('beforeunload', function(e) { e.preventDefault(); return ''; }); }); }); function onClickSubmit(frm){ // beforeunloadイベント削除 $(window).off('beforeunload'); // サブミット frm.action="beforeunload.php"; frm.method="post"; frm.submit(); } </script>