偵測內容改變警告

Facebook 有一個貼心的小功能，如果你有留下訊息，但在還沒有儲存的情況下意外的離開頁面時，Facebook 會給予警告，在討論區如果打了一堆字卻不小心按到回上頁，或者是不小心按到某個連結整頁直接跳走，而瀏覽器又沒有 cache 住你剛輸入的內容，只能用欲哭無淚來形容，怎麼實作這個功能呢。

HTML

Javascript

var isChanged = false;

$('select, input, textarea').on('change', function() {
        isChanged = true;
});

$(window).on('beforeunload', function() {
    if (true === isChanged) {
        return '您已經修改過內容，確定要離開嗎？';
    }
});

簡單來說，預設一個變數是叫 isChange 為 false，偵測該標單的 input、select、textarea 等物件內容改變時將 isChage 更改為 true，然後在 window 的 beforeunload 事件上判斷如果 isChange 為 true 時予以警告。

demo page