「このサイトを離れますか？」メッセージを表示する方法

2020-04-20JavaScript

フォームの値を変更中にブラウザの閉じるボタンをクリックしたり、ブラウザの戻るボタンをクリックしたときに、「このサイトを離れますか？」メッセージを表示する方法を紹介します。
ただし、ブラウザによってメッセージが違ったり、動作しなかったりする場合があります。
ChromeとIE、Microsoft Edge、Safariでは動作しました。

メッセージを表示する方法

// 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>