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下的keyCode键码值表
Apr 10 Javascript
js Function类型
Dec 04 Javascript
JavaScript 原型继承
Dec 26 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
Angular处理未可知异常错误的方法详解
Jan 17 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变量作用域的一些问题
2013/08/08 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
javascript如何实现create方法
2019/11/04 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python字符串替换示例
2014/04/24 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
python实现查找所有程序的安装信息
2020/02/18 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
SQL中where和having的区别
2012/06/17 面试题
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
公司试用期员工自我评价
2014/09/17 职场文书
违纪检讨书
2015/01/27 职场文书
检讨书模板大全
2015/05/07 职场文书
学籍证明模板
2015/06/18 职场文书
php 原生分页
2021/04/01 PHP