js监听离开或刷新页面时的弹窗提示
一、看图
二、使用场景。
填写表单时内容，当离开页面或者刷新的时候回丢失页面的内容，因此人性化的设计该有一个提示。所以这样的功能也就应用而生了。三、思路。
1，页面内容改变。2，离开或刷新浏览器触发事件。四、知识点。
1，如图需要填写内容的地方（即会发生改变的地方）包括input[radio],input[text],select,textarea几种。
2，触发事件选用onchange。
3，离开页面触发的事件选用onbeforeunload。五、上代码了，就这么简单：
$(document).on("change","input,textarea,select",function(){
window.onbeforeunload = function(event) {
return "您编辑的信息尚未保存，您确定要离开吗？"//这里内容不会显示在提示框，为了增加语义化。
};
});六、其他方法
可以保存到一个json里边，然后比较json是否相同，不过这样就比较复杂了。
提供一个demo，感兴趣的同学看一下效果。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var jsonObjA = {
"Name": "MyName",
"Company": "MyCompany",
"Infos": [{
"Age": "100"
},
{
"Box": [{
"Height": "100"
},
{
"Weight": "200"
}
]
}
],
"Address": "弗洛伦萨"
}
var jsonObjB = {
"Name": "MyName",
"Company": "MyCompany",
"Infos": [{
"Age": "100"
},
{
"Box": [{
"Height": "100"
},
{
"Weight": "200"
}
]
}
],
"Address": "达芬奇的故乡"
}
function isObj(object) {
return object && typeof(object) == 'object' && Object.prototype.toString.call(object).toLowerCase() == "[object object]";
}
function isArray(object) {
return object && typeof(object) == 'object' && object.constructor == Array;
}
function getLength(object) {
var count = 0;
for(var i in object) count++;
return count;
}
function Compare(objA, objB) {
if(!isObj(objA) || !isObj(objB)) return false; //判断类型是否正确
if(getLength(objA) != getLength(objB)) return false; //判断长度是否一致
return CompareObj(objA, objB, true); //默认为true
}
function CompareObj(objA, objB, flag) {
for(var key in objA) {
if(!flag) //跳出整个循环
break;
if(!objB.hasOwnProperty(key)) {
flag = false;
break;
}
if(!isArray(objA[key])) { //子级不是数组时,比较属性值
if(objB[key] != objA[key]) {
flag = false;
break;
}
} else {
if(!isArray(objB[key])) {
flag = false;
break;
}
var oA = objA[key],
oB = objB[key];
if(oA.length != oB.length) {
flag = false;
break;
}
for(var k in oA) {
if(!flag) //这里跳出循环是为了不让递归继续
break;
flag = CompareObj(oA[k], oB[k], flag);
}
}
}
return flag;
}
var result = Compare(jsonObjA, jsonObjB);
console.log(result); // true or false
</script>
</body>
</html>七、遇到的问题。
提示框的样式不能改变，个人感觉不太美观，有方法改变的同学一定告诉我哈。js监听离开或刷新页面时的弹窗提示的更多相关文章
- 【js监听报错】页面监听js报错问题
<html> <head> <script type="text/javascript"> // 页面监听js报错问题 onerror=hand ...
- js监听浏览器,关闭,刷新
//浏览器关闭或刷新事件 function bindCloseBrowser() { var a = "注意!!\n您即将离开页面!离开后可能会导致数据丢失\n\n您确定要离开吗?" ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- js离开或刷新页面检测(且兼容FF,IE,Chrome)
<!DOCTYPE html> <html> <head> <script> function closeIt() { return confirm(& ...
- js 监听整个页面的回车事件
JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch; ...
- js监听页面放大缩小
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>d ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- 使用web3.js监听以太坊智能合约event
传送门: 柏链项目学院 使用web3.js监听以太坊智能合约event 当我们在前端页面调用合约时发现有些数据不会立即返回,这时还需要再调用更新数据的函数.那么这样的方法使用起来非常不便,监听ev ...
随机推荐
- 七、linux-mysql下mysql增量备份与恢复
1.备份的意义 运维工作:保护公司的数据 . 网站7*24小时服务 但相当来说,数据更加重要,而数据最核心的就是数据库数据,所以数据库的备份和恢复就显得十分重要. 2.备份的几个参数 mys ...
- 基于Redis的Service缓存实现
项目中有使用到缓存,每次需要将缓存代码和业务代码杂糅在一起,以及分散各处的key,严重影响代码的可读性.以下是使用AOP对其简单尝试.直接上代码: 1.定义缓存注解: @Target(ElementT ...
- LeetCode No.115,116,117
No.115 NumDistinct 不同的子序列 题目 给定一个字符串 S 和一个字符串 T,计算在 S 的子序列中 T 出现的个数. 一个字符串的一个子序列是指,通过删除一些(也可以不删除)字符且 ...
- LeetCode No.91,92,93
No.91 NumDecodings 解码方法 题目 一条包含字母 A-Z 的消息通过以下方式进行了编码: 'A' -> 1 'B' -> 2 ... 'Z' -> 26 给定一个只 ...
- springboot支付项目之springboot集成jpa
springboot集成spring-jpa 本文主要内容: 1:spring boot怎么集成spring-jpa以及第一个jpa查询示例 如jpa几个常用注解.lombok注解使用 2:怎么设置i ...
- Fiddler发送get post测试 笔记
0 环境 系统环境:win7 1 操作 1 post 类似 2 get
- Zookeeper开源客户端框架Curator的使用
CuratorFramework Curator框架提供了一套高级的API, 简化了ZooKeeper的操作. 话不多说,看代码 package com.donews.data.util import ...
- pytorch中的view函数和max函数
一.view函数 代码: a=torch.randn(,,,) b = a.view(,-) print(b.size()) 输出: torch.Size([, ]) 解释: 其中参数-1表示剩下的值 ...
- Hadoop什么？
Hadoop是什么?Hadoop是一个开发和运行处理大规模数据的软件平台,是Appach的一个用java语言实现开源软件框架,实现在大量计算机组成的集群中对海量数据进行分布式计算. Hadoop框架中 ...
- Excel中带字母的数字序列自增实现方法
示例: 在A1单元格输入以下公式,然后向下填充公式 =".mr"&ROW()&" {margin-right: "&ROW()& ...