如何防止使用者在離開頁面時遺失未儲存的表單資料？

防止頁面放棄時未儲存的變更

當使用者離開包含未儲存表單資料的頁面時，提示他們確認他們的訊息至關重要避免失去工作的意圖。要實現此功能：

簡短但有限的方法：

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 外掛程式： 一個方便的函式庫，用於偵測表單變更並防止使用自訂訊息退出頁面。

警告：有限的瀏覽器支援

請注意自訂確認某些瀏覽器（例如​​Chrome 51 及更高版本）不再支援訊息。替代方案包括顯示帶有“離開”和“留下”按鈕的通用對話框。

以上是如何防止使用者在離開頁面時遺失未儲存的表單資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！