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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
canvas 实现中国象棋
Feb 17 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 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
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Django中处理出错页面的方法
2015/07/15 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
python实现飞机大战游戏
2020/10/26 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
服装厂厂长岗位职责
2013/12/27 职场文书
化妆品促销方案
2014/02/24 职场文书
马智宇结婚主持词
2014/04/01 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
表扬稿格式范文
2015/01/16 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
Python 制作自动化翻译工具
2021/04/25 Python