2014/01/21

偵測內容改變警告

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