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


Posted in Javascript onJanuary 16, 2013

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();">
Javascript 相关文章推荐
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
基于Vue+Webpack拆分路由文件实现管理
Nov 16 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 Javascript
js拦截alert对话框另类应用
Jan 16 #Javascript
javascript图像处理—仿射变换深度理解
Jan 16 #Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 #Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 #Javascript
尝试在让script的type属性等于text/html
Jan 15 #Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 #Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 #Javascript
You might like
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
Python在图片中添加文字的两种方法
2017/04/29 Python
python requests 使用快速入门
2017/08/31 Python
Python实现的knn算法示例
2018/06/14 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python列表切片常用操作实例解析
2019/12/16 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
金融专业毕业生推荐信
2013/11/26 职场文书
倡议书格式范文
2014/04/14 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
教师个人事迹材料
2014/12/17 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
java实现面板之间切换功能
2022/06/10 Java/Android