[ JavaScript ] 페이지 이동 시 내용 변경 감지, readonly 값 변경 감지

SMALL

function fn_beforeunload() {
	window.onload = function() {
    	var isBeforeunload = false;
        
        $("input").on("propertychange change keyup paste input", function() {
        	isBeforeunload = true;
        });
        
        $(window).on("beforeunload"). function() {
        	if (isBeforeunload) return "";
        });
        
        (function ($) {
        	var originalVal = $.fn.val;
            $.fn.val = function (value) {
            	var res = originalVal.apply(this, arguments);
                if (this.is("input") && arguments.length >= 1) {
                	this.trigger("input");
                }
                
                return res;
            };
        })(jQuery);
        
        $(document).on("submit", "form", function(event) {
        	$(window).off("beforeunload");
        });
}

input 태그에서 propertychange, change, keyup, paste, input 이벤트가 발생할 경우 beforeunload 이벤트를 등록시킵니다. 

beforeunload 이벤트는 사용자가 페이지를 떠날 때 정말로 떠날 것인지 묻는 확인 대화 상자를 표시합니다.

return 값에 추가 설명 같은 문구를 적을 수 있지만 크롬에서는 나타나지 않습니다.

 

readonly인 input 들은 위의 이벤트들이 감지되지 않으므로 즉시 실행 함수로 구현하여 readonly인 input type의 value가 변경될 때도 input 이벤트를 발생시키도록 처리하였습니다.

 

submit 시에 알림이 뜨면 안 되므로 이벤트가 감지되면 beforeunload 이벤트를 해제시킵니다.

 

이렇게 구현하고 원하는 페이지에서 다음과 같이 호출하면 페이지 이동 시 input이 변경되었을 경우

알림 메시지를 나타낼 수 있습니다.

$(document).ready(function() {
	fn_beforeunload();
});​