[小菜一碟] 如何讓網頁跳出「系統可能不會儲存您所做的變更」提示,提醒使用者編輯的內容尚未儲存?

觀察到使用者不時地被一個小問題給困擾著,在表單中編輯一些資訊後,突然岔去做其他事情,回來之後覺得剛剛的表單應該已經處理完了,就把網頁給關掉了,殊不知他剛剛編輯的資訊並沒有儲存,往往發現時,是已經被客訴了,要解決這個問題有很多面向的方式,系統這邊能幫的其中一種方法就是提醒使用者資料沒有儲存。

查了之後發現,這個功能意外地簡單,幾行程式碼就能搞定了,底下是我的範例,假定我的表單中有識別碼名稱兩個欄位。

然後,我預期欄位失焦(onblur)了,就代表欄位中的資訊被編輯過。

關鍵來了,我們需要去監聽 window 的一個事件叫 beforeunload,在這個事件裡面去檢查如果資料已經被編輯過,就回傳非 undefined 的任意值,只有一個地方要注意的是 IE 跟其他瀏覽器不一樣,需要為了它多寫一行程式碼。

window.addEventListener("beforeunload", function (e) {
    if (window.isDirty) {
        (e || window.event).returnValue = ""; // Gecko + IE
        return ""; // Gecko + Webkit, Safari, Chrome etc.
    }

    return undefined;
});

以上,提供給各位朋友參考。

參考資料

C# 指南 ASP.NET 教學 ASP.NET MVC 指引
Azure SQL Database 教學 SQL Server 教學 Xamarin.Forms 教學