资讯专栏INFORMATION COLUMN

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

BoYang / 1818人阅读

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

一、看图

二、使用场景。

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

三、思路。

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



    
        
        
    

    
        
    

七、遇到的问题。

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

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

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

相关文章

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

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

    mikasa 评论0 收藏0
  • js监听离开刷新页面时的弹窗提示

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

    Dean 评论0 收藏0
  • vue2实践(持续更新)

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

    n7then 评论0 收藏0
  • WKViewManager iOS 弹窗架构

    摘要:劣势由于是弹窗视图的一个管理工具,所有需要被管理的弹窗均需属于的子类,项目中已书写对应所需要的弹窗基类如等等,有需要构建弹窗的时候可以去查看相关类。字典中为从属于的子类的类名字符串,是一个数组,里面放入对应的的类名字符串。 前言 近来由于App中弹窗过多,再加上还有半透明的引导层,时常会出现多个弹窗重叠弹出,甚至会伴随引导层一起弹出,极大的影响了用户体验。 上述问题,其实很简单,只需要...

    lansheng228 评论0 收藏0
  • React组件卸载、路由跳转、页面关闭(刷新)之前进行提示

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

    leanote 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<