Zenn
Open1

Jsでのページ遷移時のalertについて

JavaScript
い。い。

やりたいこと

  • ページ遷移時にalertを表示
  • 保存されたらalertは表示しないようにする
  • 何かしらForm内に変更があった際はalertを出るようにする

ページ遷移時のalert自体が、調べてたけどうまくいかなかったが、GPTに聞いたらうまくいったのでここに残しておきます。

実装

shouldWarnOnUnloadでフラグを用いて書き込みの有無を設定することで判断。
window.addEventListener('beforeunload', (event) => {ここの部分でfunctionの引数にeventを入れていなかったために調べた時は動かなかったんだとわかった。
特に追記することもないのでこのまま投稿しておきます。

コード

let shouldWarnOnUnload = false; // フラグの初期状態

// ページを離れる際のイベント
window.addEventListener('beforeunload', (event) => {
  if (shouldWarnOnUnload) {
    event.preventDefault();
    event.returnValue = ''; // 標準のアラートメッセージが表示されます
  }
});

// 下書き保存ボタンがクリックされた時の処理
document.getElementById('save-draft-button').addEventListener('click', () => {
  // 下書き保存処理
  saveDraft();

  // フラグをリセットして、アラートが表示されないようにする
  shouldWarnOnUnload = false;
});

// 入力フィールドの変更を監視して、フラグを再設定
document.querySelectorAll('input, textarea').forEach((element) => {
  element.addEventListener('input', () => {
    // 入力があったため、アラートを表示するようにフラグを設定
    shouldWarnOnUnload = true;
  });
});

// 下書き保存の処理（例）
function saveDraft() {
  // 下書き保存の処理を実行
  console.log('下書きを保存しました。');
}