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 ...
随机推荐
- 02-信贷路由项目rose框架拆分dubbo
项目架构和 rose 框架搭建见 https://www.cnblogs.com/yuanpeng-java/p/9835984.html 1.dubbo 框架架构及组成 2.注册中心安装及配置 h ...
- vue基本配置和生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- [LC] 520. Detect Capital
Given a word, you need to judge whether the usage of capitals in it is right or not. We define the u ...
- springboot学习笔记：7.IDEA下5步完成热部署配置
开发工具IDEA 2017.02 JDK1.8 1.pom.xml中增加: <dependency> <groupId>org.springframework.boot&l ...
- HTTP-web服务器接收到client请求后的处理过程（很详细）
1. 客户发起情况到服务器网卡: 2. 服务器网卡接受到请求后转交给内核处理: 3. 内核根据请求对应的套接字,将请求交给工作在用户空间的Web服务器进程 4. Web服务器进程根据用户请求,向内核进 ...
- deeplearning.ai 改善深层神经网络 week3 超参数调试、Batch Normalization和程序框架
这一周的主体是调参. 1. 超参数:No. 1最重要,No. 2其次,No. 3其次次. No. 1学习率α:最重要的参数.在log取值空间随机采样.例如取值范围是[0.001, 1],r = -4* ...
- hadoop-2.5.2 源码学习1
- SpringBoot之HandlerInterceptor拦截器的使用 ——（三）获取requestBody解决java.io.IOException: Stream closed
原文地址:https://blog.csdn.net/zhibo_lv/article/details/81875705 感谢原作者
- whip|resist|patch|intimate|
a piece of leather or rope that is fastened to a stick, used for hitting animals or people 鞭子,皮鞭 She ...
- Android开发之《制作自己的su文件》
目录结构 ─ hello ├── jni ├── Android.mk └── hello.c 编译步骤: # cd hello # export NDK_PROJECT_PATH=`pwd` # ...