离开页面时提示是否保存页面修改内容的简单实现
在很多系统中如果我们修改了某些信息，没有保存就离开当前的页面，系统通常会提示“信息发生变化，是否要保存”等；比如当你改变了QQ中的个人基本资料， 没有点“确认”或“应用”按钮，而是直接“取消”，系统会提示“您已经对设置做了修改，是否保存？”这类友好的提示在客户体验上为软件/系统增色不少，那 么这类功能究竟如何实现呢？下面介绍一种简单的方式，即通过JS来控制，看下面的代码：
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var changeFlag=false;
//标识文本框值是否改变，为true，标识已变
$(document).ready(function(){
//文本框值改变即触发
$("input[type='text']").change(function(){
changeFlag=true;
});
//文本域改变即触发
$("textarea").change(function(){
changeFlag=true;
});
});
//离开页面时保存文档
window.onbeforeunload = function() {
if(changeFlag ==true){
//如果changeFlag的值为true则提示
if(confirm("页面值已经修改，是否要保存？")){
//处理信息保存...
alert("即将执行保存操作...");
}else{
//不保存数据...
alert("不保存信息...");
}
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<form action="">
帐号：<input type="text" name="username"/><br/>
密码：<input type="text" name="password"/><br/>
备注：<textarea rows="3" cols="17"></textarea>
<input type="submit" value="提交"/>
</form>
</body>
</html>