『葉狂人』的怕失憶筆記 Front-End

在離開頁面之前,檢查 Form 是否有被改變

有的時候,我們必須要在離開頁面之前檢查 From 是否有被改變而提出警告,這個時候以下的 Code 就非常的好用

原理就是將 Form 內的所有值 Hash 起來

然後在頁面離開之前檢查是否 Hash 改變而提醒用戶

(function ($) {
	$.fn.watchChanges = function () {
		return this.each(function () {
			$.data(this, 'formHash', $(this).serialize());
		});
	};
	$.fn.hasChanged = function () {
		var hasChanged = false;
 
		this.each(function () {
			var formHash = $.data(this, 'formHash');
 
			if (formHash != null && formHash !== $(this).serialize()) {
				hasChanged = true;
				return false;
			}
		});
 
		return hasChanged;
	};
}).call(this, jQuery);

使用方式:

jQuery(function ($) {
	var $form = $('form').watchChanges();

	$(window).on('beforeunload', function() {
		if ($form.hasChanged() and ! confirm('Continue without saving changes?')) {
			return "是否確定離開";
		}
	});
});
『葉狂人』的怕失憶筆記, author
「成功的秘訣只有三個字:勤、智、趣。」
諾貝爾物理獎得主 丁肇中