jquery實現頁面離開時檢測當前頁面是否被修改,修改則提示

qw_xingzhe發表於2015-02-03

程式碼如下:

//檢測表單是否已經修改過
$(window).bind('beforeunload',function(){
<span style="white-space:pre">	</span>if( IsModified() ){
	<span style="white-space:pre">	</span>return '您輸入的內容尚未儲存,確定離開此頁面嗎?';
<span style="white-space:pre">	</span>}
});


//檢測頁面表單是否已編輯過
function IsModified()
{
    var result = false;            							//初始化返回值                        
    var colInput = document.getElementsByTagName("input"); 	//獲取輸入框控制元件
    for (var i=0; i<colInput.length; i++){					//逐個判斷頁面中的input控制元件
        if (colInput[i].value != colInput[i].defaultValue){	//判斷輸入的值是否等於初始值
            result = true;       							//如果不相等,返回true,表示已經修改                         
            colInput[i].style.backgroundColor = "#eee"; 	//改變被修改控制元件的背景色
        }
    }
    return result;
}


改進

    //檢測表單是否已經修改過
	$(window).bind('beforeunload',function(){
		if( IsModified( $("#form") ) ){
			return '您輸入的內容尚未儲存,確定離開此頁面嗎?';
		}
	});


//檢測頁面表單是否已編輯過	findForm需要檢測的form表單
function IsModified( form )	//js原版
{
	if( !form ){
		var form = $("form");
	}
	
    var result = false;       
    
    //初始化返回值                        
    var colInput = form.find("input");				//獲取輸入框控制元件    
    for (var i=0; i<colInput.length; i++){			//逐個判斷頁面中的input控制元件
    	var THIS = colInput[i];
        if ( THIS.value != THIS.defaultValue ){		//判斷輸入的值是否等於初始值
            result = true;       					//如果不相等,返回true,表示已經修改                         
            THIS.style.backgroundColor = "#eee"; 	//改變被修改控制元件的背景色
        }
    }
    return result;
}




相關文章