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 相关文章推荐
jquery+json实现的搜索加分页效果
Mar 31 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
详解uniapp的全局变量实现方式
Jan 11 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
实用函数5
2007/11/08 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
JS实现文字放大效果的方法
2015/03/03 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
React快速入门教程
2017/01/17 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
Python中的进程分支fork和exec详解
2015/04/11 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
职工趣味运动会方案
2014/02/10 职场文书
《阳光》教学反思
2014/02/23 职场文书
班主任新年寄语
2014/04/04 职场文书
团日活动总结
2014/04/28 职场文书
毕业生求职信范文
2014/06/29 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
培训班通知
2015/04/25 职场文书
中学社团活动总结
2015/05/07 职场文书
运动会主持词大全
2015/07/02 职场文书
Python入门之基础语法详解
2021/05/11 Python
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技