js监听离开或刷新页面时的弹窗提示

BoYang 发布于2019-08-20 18:30 / 1948人阅读

摘要：填写表单时内容，当离开页面或者刷新的时候回丢失页面的内容，因此人性化的设计该有一个提示。，离开或刷新浏览器触发事件。五上代码了，就这么简单您编辑的信息尚未保存，您确定要离开吗这里内容不会显示在提示框，为了增加语义化。

一、看图

二、使用场景。

填写表单时内容，当离开页面或者刷新的时候回丢失页面的内容，因此人性化的设计该有一个提示。所以这样的功能也就应用而生了。

三、思路。

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，感兴趣的同学看一下效果。

七、遇到的问题。

提示框的样式不能改变，个人感觉不太美观，有方法改变的同学一定告诉我哈。

GPU云服务器云服务器页面离开提示js js离开页面 php的弹窗 html的弹窗怎么做

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84602.html

js监听离开或刷新页面时的弹窗提示

摘要：填写表单时内容，当离开页面或者刷新的时候回丢失页面的内容，因此人性化的设计该有一个提示。，离开或刷新浏览器触发事件。五上代码了，就这么简单您编辑的信息尚未保存，您确定要离开吗这里内容不会显示在提示框，为了增加语义化。一、看图showImg(https://segmentfault.com/img/bVR8Ny?w=846&h=381); 二、使用场景。填写表单时内容，当离开页面或者...

mikasa 2019-08-01 17:20 评论0 收藏0
vue2实践（持续更新）

摘要：记录一些小技巧和踩过的坑由于本篇文章内容太多，导致编辑器有点卡，所以新开辟了一篇实践二，后续再这里更新。组件的生命周期函数是在标签里的数据发生变化时候触发数据可能更新了，但是没有绑定到上面的话，不会调用钩子函数。记录一些小技巧和踩过的坑由于本篇文章内容太多，导致SF编辑器有点卡，所以新开辟了一篇 vue2实践（二），后续再这里更新。 1. props 带不带冒号的区别 ...

n7then 2019-08-20 15:05 评论0 收藏0
React组件卸载、路由跳转、页面关闭（刷新）之前进行提示

摘要：组件卸载生命周期路由跳转和页面关闭三者看起来有些类似的地方，比如都是当前组件即将从视口消失，但实际上所触发的事件均不相同。至此已经实现了路由跳转时提醒用户进行保存的功能。 React组件卸载生命周期、路由跳转和页面关闭三者看起来有些类似的地方，比如都是当前组件即将从视口消失，但实际上所触发的事件均不相同。以一个实际案例出发：某单页应用的文章编辑页用户正在编辑文章，此时尚未保存。当用户...

leanote 2019-08-23 14:46 评论0 收藏0