未保存のデータを保護しながら Web フォームの放棄を防ぐにはどうすればよいですか?

データを失わずにフォームの放棄を防ぐ

ユーザーがフォーム データを保存していない Web ページから離れると、フォーム データが失われイライラすることがあります。進捗。警告プロンプトの実装は、データの整合性とユーザーの満足度を確保するために重要です。

BeforeUnload イベントの実装

最初のアプローチでは、beforeunload イベントを処理し、null 以外の値を返します。弦。ただし、フォームの送信によってもこのイベントがトリガーされる可能性があることに注意してください。これを軽減するには、フォームの送信を示すフラグ (formSubmitting) を設定し、それに応じてプロンプトを抑制します。

window.onload = function () {
    window.addEventListener("beforeunload", function (e) {
        if (formSubmitting) {
            return;
        }

        var confirmationMessage = 'Unsaved changes will be lost.';
        (e || window.event).returnValue = confirmationMessage; // IE
        return confirmationMessage; // Others
    });
};

「ダーティ」フラグを使用する

プロンプトを表示しないようにするにはユーザーは、変更が加えられていない場合、「ダーティ」を使用します。 flag.

var isDirty = function () { return /* logic here */ };

window.onload = function () {
    window.addEventListener("beforeunload", function (e) {
        if (formSubmitting || !isDirty()) {
            return;
        }
        
        // Display prompt here
    });
};

代替アプローチ

• jQuery とフォームのシリアル化: このメソッドは、無効な要素と名前のない要素をスキップするため制限があります。 .
• イベント:キー押下や変更イベントは、JavaScript や仮想入力を通じて行われた変更を含め、必ずしもすべての変更をキャプチャするとは限りません。

サードパーティ ソリューション

実績のあるライブラリの活用を検討してください。単純化する実装:

• jQuery.dirty: フォームの変更を検出し、データを保存せずに終了するのを防ぎます。
• jQuery Are You Sure? (非推奨): カスタム メッセージやその他の便利な機能を提供します。

ブラウザに関する考慮事項

カスタム メッセージは、Firefox やその他の最新のブラウザではサポートされていない場合があります。クロム。わかりやすくするために、デフォルトのブラウザダイアログを使用することを検討してください。

以上が未保存のデータを保護しながら Web フォームの放棄を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。