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 相关文章推荐
Javascript 面向对象之重载
May 04 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
微信小程序自定义胶囊样式
Dec 27 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
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
Python 25行代码实现的RSA算法详解
2018/04/10 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
python 基于wx实现音乐播放
2020/11/24 Python
python爬取youtube视频的示例代码
2021/03/03 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
string = null 和string = ''的区别
2013/04/28 面试题
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
运动会横幅标语
2014/06/17 职场文书
教师节倡议书
2014/08/30 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
公司离职证明标准格式
2014/11/18 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB