您好,欢迎来到点滴吧! 手机版
点滴吧www.diandiba.com
记录点点滴滴,尽在点滴吧
  • 文章
  • 文章
  • 特效
  • 素材
  • 景点
您现在的位置:首页 > JavaScript教程 > 文章正文
简单实现离开页面提示是否保存页面修改内容的js代码
更新时间:2015/1/3 18:45:51   点击:6838次

在很多系统中如果我们修改了某些信息,没有保存就离开当前的页面,系统通常会提示“信息发生变化,是否要保存”等;比如当你改变了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>

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


上一篇:常用弹出窗口代码   下一篇:没有了
相关文章
导航分类
热门文章
关于我们| 联系我们| 免责声明| 网站地图|
CopyRight 2012-2015 www.diandiba.com - 点滴吧 All Rights Reserved
滇ICP备09005765号-2