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 ...
随机推荐
- 05 - Tomcat 线程池的配置与优化
添加 Executor 在server.xml中的Service节点里面,增加executor节点,然后配置connector的executor属性,如下: <Executor name=&qu ...
- D. Salary Changing（找中位数）
题:https://codeforces.com/contest/1251/problem/D 题意:给你n个单位需要满足达到的区间,再给个s,s是要分配给n的单位的量,当然∑l<=s,问经过分 ...
- nutzboot 项目打包排除或指定配置文件（夹）
springboot 是一样的 我这里就是从springboot哪里拿过来的 (nutzboot2.x已测试可以使用) 排除指定文件 在pom 文件 build 标签内添加 resources < ...
- maven中指定build一个project中几个特定的子modules
问题由来: 一个项目可能会有多个子module,在特定情况下可能只需要build其中几个module. 例如我的项目的目录结构如下 myproject |------------module_one ...
- Springmvc多视图
Springmvc多视图 多视图是一个方法可以返回json/xml等格式的数据 第一步:导入xml格式支持的jar包 spring-oxm-3.2.0.RC2.jar 第二步:配置支持多视图 < ...
- YII框架开发一个项目的通用目录结构：
testdrive/ index. assets/ css/ images/ themes/ yiic. commands/ ...
- 简化Java编程的法宝，让工作更高效
如果你没有看过之前的文章,也不要紧,这并不影响你对接下来的内容的理解,不过为了照顾直接看到第二篇的同学,还是有必要介绍一下HuTool的引入方式. 在项目的pom.xml的dependencies中加 ...
- 转载-WebSocket协议解析
现在,很多网站为了实现推送技术,所用的技术都是轮询.轮询是指在特定的时间间隔(如每一秒),由浏览器对服务器发起HTTP请求,然后由服务器返回数据给浏览器.由于HTTP协议是惰性的,只有客户端发起请求, ...
- 转载【docker】CMD ENTRYPOINT 的使用方法
原文:https://blog.csdn.net/u010900754/article/details/78526443
- 【数据结构】B树与B+树
定义 B 树可以看作是对2-3查找树的一种扩展,即他允许每个节点有M-1个子节点. 根节点至少有两个子节点 每个节点有M-1个key,并且以升序排列 位于M-1和M key的子节点的值位于M-1 和M ...