离开页面提示是否保存页面修改内容的简单实现

在很多系统中如果我们修改了某些信息，没有保存就离开当前的页面，系统通常会提示“信息发生变化，是否要保存”等；比如当你改变了QQ中的个人基本资料，没有点“确认”或“应用”按钮，而是直接“取消”，系统会提示“您已经对设置做了修改，是否保存？”这类友好的提示在客户体验上为软件/系统增色不少，那么这类功能究竟如何实现呢？下面介绍一种简单的方式，即通过JS来控制，看下面的代码：

Html代码

上面的代码中先定义了一个标志位"changeFlag"，然后通过Jquery设置当页面中的"文本框"和"文本域"在发生变化时改变标志位"changeFlag"的值为true，最后当页面发生跳转(如form表单提交、超链接等)时，window.onbeforeunload就开始验证标志位"changeFlag"的值，以给出相应的提示信息！

其中window.onbeforeunload是在页面刷新或关闭时调用，是正要去服务器读取新的页面时调用，此时还没开始读取；

页面body部分代码如下：

Html代码

3.             帐号：
   
4.             密码：
   
5.             备注：
9. 屁孩

当页面“帐号”、“密码”、“备注”三项中的任意一项发生变化之后刷新、提交、点链接都会进行提示！其他单选按钮、复选框等自行修改之即可！

更多信息请访问屁孩博客