如何在保護未儲存資料的同時防止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
    });
};

使用“臟”標誌

以避免提示用戶在沒有進行任何更改時，使用“臟”

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 您確定嗎？ （已棄用）： 提供自訂訊息和其他有用的功能。

瀏覽器注意事項

Firefox 等現代瀏覽器可能不支援自訂訊息鉻合金。為了清晰起見，請考慮使用預設瀏覽器對話方塊。

以上是如何在保護未儲存資料的同時防止Web表單被放棄？的詳細內容。更多資訊請關注PHP中文網其他相關文章！