首頁 > web前端 > js教程 > 如何在離開頁面前提示使用者確認未儲存的變更?

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

Mary-Kate Olsen
發布: 2024-12-03 13:59:10
原創
256 人瀏覽過

How to Prompt Users to Confirm Unsaved Changes Before Leaving a Page?

確認未儲存的變更

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

追蹤更改:

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

顯示確認:

要顯示確認訊息,可以使用 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板