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自执行函数之伪命名空间封装法
Dec 25 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
js实现前端分页页码管理
Jan 06 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 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基本函数汇总
2015/07/09 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
js Dialog 实践分享
2012/10/22 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
浅谈django的render函数的参数问题
2018/10/16 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
python交易记录整合交易类详解
2019/07/03 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
协议书的格式
2014/04/23 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
求职意向书
2014/07/29 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
物业管理交接协议书
2016/03/24 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis