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编程起步(第五课)
Jan 10 Javascript
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 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
javascript indexOf函数使用说明
2008/07/03 Javascript
js 函数的副作用分析
2011/08/23 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
Javascript实现单例模式
2016/01/24 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
为什么相对PHP黑python的更少
2020/06/21 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
五十岁生日宴会答谢词
2014/01/15 职场文书
学历公证书范本
2014/04/09 职场文书
卖车协议书
2014/04/21 职场文书
人力资源求职信
2014/05/25 职场文书
高中综合实践活动总结
2014/07/07 职场文书
考察邀请函范文
2015/01/31 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书