ホームページ > ウェブフロントエンド > jsチュートリアル > ユーザーが変更を保存せずに Web ページから離れることを防ぐにはどうすればよいですか?

ユーザーが変更を保存せずに Web ページから離れることを防ぐにはどうすればよいですか?

Linda Hamilton
リリース: 2024-11-30 01:17:11
オリジナル
849 人が閲覧しました

How Can I Prevent Users from Leaving a Web Page with Unsaved Changes?

未保存の変更の防止

Web ページ上のデータを変更するとき、ユーザーがデータを保存せずに移動できないようにしたいのが一般的です。変化します。これは、window.onbeforeunload イベントを使用して実現できます。

実装

レガシー ブラウザ (IE6 ~ 8、Firefox) 1-3.5)

  1. 文字列を返す関数に window.onbeforeunload を設定します:

    window.onbeforeunload = function() {
        return "Unsaved changes. Are you sure you want to leave?";
    };
    ログイン後にコピー
  2. 無効にするイベントを削除しますそれ:

    window.onbeforeunload = null;
    ログイン後にコピー
    ログイン後にコピー

最新のブラウザ (Chrome、Firefox など)

  1. プロンプト:

    window.onbeforeunload = function() {
        return true;
    };
    ログイン後にコピー
  2. プロンプトを無効にする:

    window.onbeforeunload = null;
    ログイン後にコピー
    ログイン後にコピー

変更の追跡

変更が加えられたかどうかを判断するには、検証フレームワークまたは独自のカスタム イベント ハンドラー。

jQuery の例:

$('input').change(function() {
    if ($(this).val() != "") {
        // Enable the prompt
        window.onbeforeunload = function() {
            return true;
        };
    }
});
ログイン後にコピー

ブラウザ固有の考慮事項

  • Chrome およびSafari では一般的なメッセージのみが表示され、カスタム メッセージは表示されません。
  • Firefox プロンプトURL の変更ではなく、フォームの送信のみです。

以上がユーザーが変更を保存せずに Web ページから離れることを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート