离开页面提示是否保存页面修改内容的简单实现
在很多系统中如果我们修改了某些信息，没有保存就离开当前的页面，系统通常会提示“信息发生变化，是否要保存”等；比如当你改变了QQ中的个人基本资料，没有点“确认”或“应用”按钮，而是直接“取消”，系统会提示“您已经对设置做了修改，是否保存？”这类友好的提示在客户体验上为软件/系统增色不少，那么这类功能究竟如何实现呢？下面介绍一种简单的方式，即通过JS来控制，看下面的代码：
Html代码 
- <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部分代码如下：
Html代码
- <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>
当页面“帐号”、“密码”、“备注”三项中的任意一项发生变化之后刷新、提交、点链接都会进行提示！其他单选按钮、复选框等自行修改之即可！
更多信息请访问屁孩博客
