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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
vue实现分页组件
Jun 16 Javascript
JavaScript async/await原理及实例解析
Dec 02 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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
python和opencv实现抠图
2018/07/18 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
python中def是做什么的
2020/06/10 Python
大学生求职简历的自我评价
2013/10/14 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
Java完整实现记事本代码
2022/06/16 Java/Android
mysql查看表结构的三种方法总结
2022/07/07 MySQL