js 实现在离开页面时提醒未保存的信息(减少用户重复操作)

Javascript代码


代码如下:

//在离开页面时判断是否有未保存的输入值
var hasSaved = false;//是否有输入的内容未保存标志，初始值为false
function CheckUnsave(){
if(hasSaved==false){
alert("您上传的东西尚未保存，请保存后再离开页面");
return false;}
//return true; //不能加这个语句
}

//保存了则改变状态
function ChangeState()
{
hasSaved = true;
}
</script>

在body中加入属性onbeforeunload
Html代码


代码如下:

<body onbeforeunload="return CheckUnsave();"><!--一定要加return-->

要在提交action之前调用ChangeState.
如果按下某个按钮后离开页面则不再提醒，比如保存的按钮，则要在保存的按钮按下以后，要修改下是否保存的标志符的状态eg：
Html代码


代码如下:

<input type="submit" name="Submit" value="保 存" onClick="ChangeState();">

赞 (0)

相关推荐

  • js实时计算字数提醒的文本框

    js实时计算字数提醒的文本框

    自己想了一下应该是用JavaScript实现的,今天把它做出来了.原理很简单就是根据文本框触发的onkeyup事件来获得当前文本框字符的长度,然后文本框允许输入的最大字符数来减去当前的字符数,并用label控件显示出来就可以了. 效果图:演示代码: enter function keypress1() //text输入长度处理 { var text1=document.getElementById("mytext1").value; var len=15-text1.length; v

  • js实现的定时关闭页面或定时提醒效果代码

    v\:*{behavior:url(#default#vml)} v\:oval,#oDiv{position=absolute;width=200;height=200} #stay{position=absolute;top=70;left=59;color=RED;padding=6;font=900 20/1.3} #input input{border-left=0;border-right=0} Cool Clock 9?'':'_')+per+'%'" style=position

  • javascript网页关闭时提醒效果脚本

    复制代码 代码如下: <script language=javascript> function stoprefresh() { return "you will lose any unsaved content"; } function UnloadConfirm() { //页面离开后的事件 alert('离开页面后的一些清理工作--'); } </script> <body> <script> window.onbeforeunlo

  • 15分钟提醒一次，珍惜时间啊

    15分钟提醒一次,珍惜时间啊保存为.vbs 复制代码 代码如下: today=Date() years=DatePart("yyyy",today)-1981-1 Days=DatePart("y",today)+25 If DatePart("m",today)=12 Then  if DatePart("d",today)>=9 Then  MsgBox "ok"  Years=Years+1  

  • js链接确认提醒功能

    function S(i){return document.getElementById(i)} function copyUrl(){//复制网址 var clipBoardContent=S("downloadDirect").href; try{ window.clipboardData.setData("Text",clipBoardContent); alert("复制成功!"); }catch(e){ alert("复制失败

  • javascript 日历提醒系统( 兼容所有浏览器 )

    功能介绍: 1.正常的日历功能. 2.等等等 3.接收 数组 例如: 复制代码 代码如下: new Calendar("id").show( { "20091120": "今天干了嘛嘛...", "2009320": "今天干了嘛嘛..." } ); 日历提示样式分为3类. a. 当日 b.当年当月当日提示样式 c.当月当日提示样式 鼠标覆盖在有提示的日期上自动出现提示内容 4...... 主要分为2种用处

  • js 实现在离开页面时提醒未保存的信息(减少用户重复操作)

    Javascript代码 复制代码 代码如下: //在离开页面时判断是否有未保存的输入值 var hasSaved = false;//是否有输入的内容未保存标志,初始值为false function CheckUnsave(){ if(hasSaved==false){ alert("您上传的东西尚未保存,请保存后再离开页面"); return false;} //return true; //不能加这个语句 } //保存了则改变状态 function ChangeState() {

  • vue离开页面时如何销毁定时器

    vue离开页面时如何销毁定时器

    目录 vue离开页面销毁定时器 组件里定时器销毁问题 解决方法1 解决方案2 vue离开页面销毁定时器 beforeDestroy() { if(this.timer) { clearInterval(this.timer); //关闭  }  //利用vue的生命周期函数 vue 是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可. 组件里定时器销毁问题 我在a页面写一个定时,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行.这样

  • 离开页面时检测表单元素是否被修改,提示保存的js代码

    复制代码 代码如下: window.onbeforeunload = function() { if(is_form_changed()) { return "您的修改内容还没有保存,您确定离开吗?"; } } function is_form_changed() { var t_save = jQuery("#t_save"); //检测页面是否要保存按钮 if(t_save.length>0) { //检测到保存按钮,继续检测元素是否修改 var is_c

  • 基于jQuery实现的当离开页面时出现提示的实现代码

    复制代码 代码如下: //绑定beforeunload事件 $(window).bind('beforeunload',function(){ return '您输入的内容尚未保存,确定离开此页面吗?'; }); //解除绑定 $(window).unbind('beforeunload');

  • js实现用户离开页面前提示是否离开此页面的方法（包括浏览器按钮事件）

    本文实例讲述了js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件).分享给大家供大家参考.具体如下: 用户离开页面前,提示是否离开此页面(包括浏览器按钮事件) <script type="text/javascript"> window.onbeforeunload = function(){ return "您的文章尚未保存!"; } </script> 如果在退出页面时需要弹出对话框,提示用户将要退出页面,类似当设置某个功

  • JS返回页面时自动回滚到历史浏览位置

    在我的系统实际开发过程中遇到一个需求,我需要让应用在各个页面间跳转时回到每页原先浏览到的位置,方便用户使用. 在网上查资料时,看到的方案有不少,众说纷纭,但真正给出可行可用代码的寥寥无几,所以我干脆按自己的想法用SessionStorage写了一个缓存页面的方法,在离开页面时将需要缓存的容器中所有内容都存到SessionStorage中,在返回页面时重新加载,方便用户操作,效果如下: 页面缓存 使用方法 用法也很简单,咱一步一步讲. 首先,在你需要缓存标签容器的类名中加入cache,并写一个na

  • JS实现进入页面时渐变背景色的方法

    本文实例讲述了JS实现进入页面时渐变背景色的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>JS实现的进入页面时的渐变的背景色效果</title> <SCRIPT Language="JavaScript"> <!-- 屏幕变色程序 --> function CBgColor(){ var color = 0, step = 1 //color为初始颜色,step为初始步长

  • js检测离开或刷新页面时表单数据是否更改的方法

    本文实例讲述了js检测离开或刷新页面时表单数据是否更改的方法.分享给大家供大家参考,具体如下: function formIsDirty(form) { for (var i = 0; i < form.elements.length; i++) { var element = form.elements[i]; var type = element.type; if (type == "checkbox" || type == "radio") { if (

  • 基于JS实现移动端访问PC端页面时跳转到对应的移动端网页

    基于JS实现移动端访问PC端页面时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,以下实现思路经过小编测试过,放心使用. 1.效果图 PC端访问显示: 移动端访问显示: 2.实现: 不考虑移动端搜索引擎优化的话,只需要通过JS判断是否移动端,然后确定是否跳转到指定页面就行了,主要JS如下: //判断是否移动端,如果是则跳转到指定的URL地址 function browserRedirect(url) { //只读的字符串,

  • 关闭页面时window.location事件未执行的原因分析及解决方案

    1.问题描述: JS中定义widow.location = function(),页面关闭时,logout()函数未执行. window.onunload = function() { logout(); } function logout(reqParam, callback){ var userManageServiceUrl = "http://" + getServerAddr() + "/axis2/services/UserManageService";

随机推荐