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 相关文章推荐
Javascript this指针
Jul 30 Javascript
jQuery.extend 函数详解
Feb 03 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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实现网站插件机制的方法
2009/11/10 PHP
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
js取得url地址参数实例
2013/02/22 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
《javascript少儿编程》location术语总结
2018/05/27 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
python使用socket连接远程服务器的方法
2015/04/29 Python
Python文件及目录操作实例详解
2015/06/04 Python
Python range与enumerate函数区别解析
2020/02/28 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
大四学生找工作的自荐信
2014/03/27 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
七年级生物教学反思
2016/02/20 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python