您的位置:首页 > Web前端 > JQuery

jquery实现页面离开时检测当前页面是否被修改,修改则提示

2015-02-03 16:41 344 查看
代码如下:

//检测表单是否已经修改过
$(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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: