Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

ページ移動・離脱時のアラートメッセージ

Dev

利用者にとってフォームからの予期せぬ離脱を防ぐため、アラートメッセージを作った。

入力、確認、完了ページがあるフォームで、完了ページでは既にデータも送信されていて利用者が失うものが薄いと思ったので、ここではアラートを出さないようにした。配慮した点はそのくらいか。

$(function(){
  $(window).on('beforeunload', function() {
    return '入力したデータは保存されませんがよろしいですか?';
  });

  $('input[type=submit], .edit-btn').click(function() { // 送信ボタンや編集ボタン
    $(window).off('beforeunload');
  });

  if (window.location.pathname == '/path') { // `/path` をアラートを出したくないページのパスに
    $(window).off('beforeunload');
  }
});

参考にしたドキュメント