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实现随机返回数组的一个元素
Aug 13 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
javascript this详细介绍
Sep 19 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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制作图型计数器的例子
2006/10/09 PHP
php绘制一个扇形的方法
2015/01/24 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
JS之相等操作符详解
2016/09/13 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
Python实现的异步代理爬虫及代理池
2017/03/17 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
python 决策树算法的实现
2020/10/09 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
创业计划书如何吸引他人眼球
2014/01/10 职场文书
小加工厂管理制度
2014/01/21 职场文书
法制宣传口号
2014/06/16 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
培训通知书模板
2015/04/17 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书