js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
更新时间：2013年01月16日 11:06:24 作者：
在离开页面时判断是否有未保存的输入值,然后进行提醒，接下来介绍实现步骤，感兴趣的朋友可以了解下
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();">
复制代码 代码如下:
//在离开页面时判断是否有未保存的输入值
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();">
相关文章
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
这篇文章主要介绍了javascript数组对象常用api函数,结合实例形式总结分析了javascript针对数组的连接、删除、反转、排序、插入等操作相关函数用法,需要的朋友可以参考下2016-09-09
通过这篇文章帮助大家快速学习JavaScript DOM操作基础的相关知识，本文给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2021-04-04
JavaScript中的canvas 实现一个圆环渐变倒计时效果
这篇文章主要介绍了JavaScript中的canvas 实现一个圆环渐变倒计时效果，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要为大家详细介绍了Javascript中的async函数，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了JavaScript隐式类型转换代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
javascript基于HTML5 canvas制作画箭头组件
该组件实现了根据箭头起止点坐标画箭头功能。目前组件可设置箭头形状（大小和角度）。2014-06-06
这篇文章主要介绍了uniapp几行代码解决滚动穿透问题,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
js中find、findIndex、indexOf的用法和区别
本文主要介绍了js中find、findIndex、indexOf的用法和区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要为大家详细介绍了JavaScript最完整的深浅拷贝实现方式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
js 树组复制方法2009-02-02
最新评论