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


Posted in Javascript onAugust 02, 2016

本文实例讲述了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 (element.checked != element.defaultChecked) {
        return true;
      }
    }
    else if (type == "hidden" || type == "password" || type == "text" || type == "textarea") {
      if (element.value != element.defaultValue) {
        return true;
      }
    }
    else if (type == "select-one" || type == "select-multiple") {
      for (var j = 0; j < element.options.length; j++) {
        if (element.options[j].selected != element.options[j].defaultSelected) {
          return true;
        }
      }
    }
  }
  return false;
}
window.onbeforeunload = function (e) {
  e = e || window.event;
  if (formIsDirty(document.forms["someForm"])) {
    // IE 和 Firefox
    if (e) {
      e.returnValue = "对不起,页面数据已做修改,尚未保存,确定要刷新或离开本页面?";
    }
    // Safari浏览器
    return "对不起,页面数据已做修改,尚未保存,确定要刷新或离开本页面?";
  }
};

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js下写一个事件队列操作函数
Jul 19 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
javascript 实现map集合
Apr 03 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 #Javascript
深入理解JavaScript中Ajax
Aug 02 #Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 #Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 #Javascript
实例详解jQuery的无new构建
Aug 02 #Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 #Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 #Javascript
You might like
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
js中function()使用方法
2013/12/24 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
vue中template的三种写法示例
2020/10/21 Javascript
Python中操作文件之write()方法的使用教程
2015/05/25 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
Python中 map()函数的用法详解
2018/07/10 Python
python django model联合主键的例子
2019/08/06 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
什么是命名空间(NameSpace)
2015/11/24 面试题
新学期校长寄语
2014/01/18 职场文书
七年级音乐教学反思
2014/01/26 职场文书
软件项目开发计划书
2014/05/01 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
农村婚庆主持词
2015/06/29 职场文书
新娘婚礼致辞
2015/07/27 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
Python中的嵌套循环详情
2022/03/23 Python
ubuntu下常用apt命令介绍
2022/06/05 Servers