js監聽離開或刷新頁面時的彈窗提示

mikasa 發布于2019-08-01 17:20 / 746人閱讀

摘要：填寫表單時內容，當離開頁面或者刷新的時候回丟失頁面的內容，因此人性化的設計該有一個提示。，離開或刷新瀏覽器觸發事件。五上代碼了，就這么簡單您編輯的信息尚未保存，您確定要離開嗎這里內容不會顯示在提示框，為了增加語義化。

一、看圖

二、使用場景。

填寫表單時內容，當離開頁面或者刷新的時候回丟失頁面的內容，因此人性化的設計該有一個提示。所以這樣的功能也就應用而生了。

三、思路。

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 "您編輯的信息尚未保存，您確定要離開嗎？"http://這里內容不會顯示在提示框，為了增加語義化。
    };
});

六、其他方法

可以保存到一個json里邊，然后比較json是否相同，不過這樣就比較復雜了。
提供一個demo，感興趣的同學看一下效果。

七、遇到的問題。

提示框的樣式不能改變，個人感覺不太美觀，有方法改變的同學一定告訴我哈。

GPU云服務器云服務器頁面離開提示js js離開頁面 php的彈窗 html的彈窗怎么做

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51110.html

js監聽離開或刷新頁面時的彈窗提示

摘要：填寫表單時內容，當離開頁面或者刷新的時候回丟失頁面的內容，因此人性化的設計該有一個提示。，離開或刷新瀏覽器觸發事件。五上代碼了，就這么簡單您編輯的信息尚未保存，您確定要離開嗎這里內容不會顯示在提示框，為了增加語義化。一、看圖showImg(https://segmentfault.com/img/bVR8Ny?w=846&h=381); 二、使用場景。填寫表單時內容，當離開頁面或者...

BoYang 2019-08-20 18:30 評論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