如何在離開頁面前提示使用者確認未儲存的變更？

確認未儲存的變更

問題：使用者離開時如何顯示確認訊息未儲存的頁面更改？

追蹤更改：

要追蹤更改，您可以使用事件偵聽器來偵聽輸入欄位或其他儲存資料的元素中的變更。當發生變更時，設定一個標誌以指示有未儲存的變更。

顯示確認：

要顯示確認訊息，可以使用 window.onbeforeunload事件。當使用者嘗試離開頁面時觸發。在此事件處理程序中，檢查是否有任何未儲存的變更。如果有，使用confirm()顯示確認訊息。

範例：

// Create a flag to track changes
var hasUnsavedChanges = false;

// Add an event listener to input fields
$('input').on('change', function() {
  hasUnsavedChanges = true;
});

// Create an event handler for window.onbeforeunload
window.onbeforeunload = function() {
  if (hasUnsavedChanges) {
    return "Are you sure you want to leave this page? You have unsaved changes.";
  }
};

以上是如何在離開頁面前提示使用者確認未儲存的變更？的詳細內容。更多資訊請關注PHP中文網其他相關文章！