ユーザーがページを離れるときに保存されていないフォーム データが失われるのを防ぐにはどうすればよいですか?

ページ放棄時の保存されていない変更の防止

ユーザーがフォーム データを保存していないページから移動するとき、ユーザーにフォーム データの確認を求めるメッセージを表示することが重要です。自分の仕事を失わないようにしたいという意図。これを実装するには:

短いが限定的なアプローチ:

window.addEventListener("beforeunload", function (e) {
  e.returnValue = "Warning: Unsaved changes. Are you sure you want to leave?";
});

ただし、このアプローチでは、フォーム データが送信された場合でも確認メッセージがトリガーされるため、回避策が必要です。

ダーティによる包括的なソリューションフラグ:

無関係なページの葉に確認メッセージが表示されないようにするには、フォーム データがいつ変更されたかを示す「ダーティ」フラグを使用します。

const isDirty = () => false;

window.addEventListener("beforeunload", function (e) {
  if (formSubmitting || !isDirty()) {
    return;
  }

  e.returnValue = "Warning: Unsaved changes. Are you sure you want to leave?";
});

isDirty を実装します。使用するメソッド:

• イベントベースのアプローチ: ユーザーの監視
• jQuery Dirty Plugin: フォームの変更を検出し、カスタム メッセージでページが終了するのを防ぐための便利なライブラリです。
>

警告: 制限付きブラウザサポート

カスタム確認メッセージは、Chrome 51 以降などの一部のブラウザではサポートされなくなったことに注意してください。代わりに、「退出」ボタンと「滞在」ボタンを備えた一般的なダイアログを表示することもできます。

以上がユーザーがページを離れるときに保存されていないフォーム データが失われるのを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。