www.diandiba.com记录点点滴滴，尽在点滴吧
- 文章
- 文章
- 特效
- 素材
- 景点
www.diandiba.com在很多系统中如果我们修改了某些信息，没有保存就离开当前的页面，系统通常会提示“信息发生变化，是否要保存”等；比如当你改变了QQ中的个人基本资料，没有点“确认”或“应用”按钮，而是直接“取消”，系统会提示“您已经对设置做了修改，是否保存？”这类友好的提示在客户体验上为软件/系统增色不少，那么这类功能究竟如何实现呢？下面介绍一种简单的方式，即通过JS来控制，看下面的代码：
<script type="text/javascript" src="js/jquery.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>上面的代码中先定义了一个标志位"changeFlag"，然后通过Jquery设置当页面中的"文本框"和"文本域"在发生变化时改变标志位"changeFlag"的值为true，最后当页面发生跳转(如form表单提交、超链接等)时，window.onbeforeunload就开始验证标志位"changeFlag"的值，以给出相应的提示信息！
其中window.onbeforeunload是在页面刷新或关闭时调用，是正要去服务器读取新的页面时调用，此时还没开始读取；
页面body部分代码如下：
<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> <a href="http://www.pihai.me">屁孩</a> </body>
当页面“帐号”、“密码”、“备注”三项中的任意一项发生变化之后刷新、提交、点链接都会进行提示！其他单选按钮、复选框等自行修改之即可！