屁孩博客：离开页面提示是否保存页面修改内容的简单实现
在很多系统中如果我们修改了某些信息，没有保存就离开当前的页面，系统通常会提示“信息发生变化，是否要保存”等；比如当你改变了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>
?
当页面“帐号”、“密码”、“备注”三项中的任意一项发生变化之后刷新、提交、点链接都会进行提示！其他单选按钮、复选框等自行修改之即可！
?
更多信息请访问屁孩博客