Are you sure?

leave.js

var Omeka = Omeka || {};
Omeka.LeavePage = {
	timer: null,
	// list of events and selectors, that should let user leave page without showing warning
	allow: {
		// click: 'a.delete-confirm',
		// 'click keydown': 'input#Delete',
	},
	message: 'It seems there are unsaved changes, that are going to be lost if you leave this page. Click "Leave page" to continue.'
};

(function ($) {

	/**
	 * Fire window.confirm dialog on unsaved changes in form, 
	 * when trying to leave the page.
	 * 
	 * @note Based on window.onbeforeunload - Since 25 May 2011, the HTML5 specification states 
	 * that calls to window.alert(), window.confirm(), and window.prompt() methods 
	 * may be ignored during this event.
	 */
	Omeka.LeavePage.init = function ($form) {
		if (!$form.length) {
			return;
		}
		var isAllowed = false;
		var old = getFormState($form);
		
		var isDirty = function() {
			return (old != getFormState($form));
		}
		var confirmOnPageExit = function (e) {
			if (!isAllowed && isDirty()) {
				// If we haven't been passed the event get the window.event
				e = e || window.event;
				// For IE6-8 and Firefox prior to version 4
				if (e) {
					e.returnValue = Omeka.LeavePage.message;
				}
				// For Chrome, Safari, IE8+ and Opera 12+
				return Omeka.LeavePage.message;
			}
			isAllowed = false;
		};
		// on save changes
		$form.on('submit', function(e) {
			// Turn it off - remove the function entirely
			window.onbeforeunload = null;
		});
		// on delete
		$(document).on('click keydown', 'input#Delete', function(e) {
			$(this).parents('form').off('submit').one('submit', function(e) {
				window.onbeforeunload = null;
			});
		});

		if (Omeka.LeavePage.allow) {
			// apply the allowed elements listeners
			$.each(Omeka.LeavePage.allow, function(type, selector) {
				$(document).on(type, selector, function(e) {
					isAllowed = true;
				});
			})
		}
		
		// Turn it on - assign the function that returns the string
		window.onbeforeunload = confirmOnPageExit;
	};
	
	/**
	 * This is additional form serialization that should help us to tell 
	 * if there are changes made in form. 
	 */
	function getFormState($form) {
		var states = [$form.serialize()];
		// $.serialize() doesn't include <input type=file tags at all
		$form.find('input[type=file]').each(function() {
			var el = $(this);
			states.push(el.attr('name') +'='+ el.prop('value'));
		});
		return states.join('&');
	}

})(jQuery);

usage.html

<script>
jQuery(document).bind('omeka:elementformload', function (event) {
	// there are plenty plugins adding and altering elements in form, filling values, etc...
	// so we need to use pretty high timeout, before we collect the original form state
	clearTimeout(Omeka.LeavePage.timer);
	Omeka.LeavePage.timer = setTimeout(function() { Omeka.LeavePage.init($('#item-form')); }, 1000);
});
</script>