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控制网页层收起和展开效果的方法
Apr 15 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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/12/23 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
destoon复制新模块的方法
2014/06/21 PHP
yii添删改查实例
2015/11/16 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
python实现简单购物商城
2016/05/21 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
政法大学毕业生自荐信范文
2014/01/01 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
依法行政工作汇报
2014/10/28 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
Oracle中DBLink的详细介绍
2022/04/29 Oracle
PHP RabbitMQ消息列队
2022/05/11 PHP