資訊專欄INFORMATION COLUMN
摘要：填寫表單時內(nèi)容，當離開頁面或者刷新的時候回丟失頁面的內(nèi)容，因此人性化的設(shè)計該有一個提示。，離開或刷新瀏覽器觸發(fā)事件。五上代碼了，就這么簡單您編輯的信息尚未保存，您確定要離開嗎這里內(nèi)容不會顯示在提示框，為了增加語義化。
一、看圖
二、使用場景。
填寫表單時內(nèi)容，當離開頁面或者刷新的時候回丟失頁面的內(nèi)容，因此人性化的設(shè)計該有一個提示。所以這樣的功能也就應(yīng)用而生了。
三、思路。
1，頁面內(nèi)容改變。2，離開或刷新瀏覽器觸發(fā)事件。
四、知識點。
1，如圖需要填寫內(nèi)容的地方（即會發(fā)生改變的地方）包括input[radio],input[text],select,textarea幾種。 2，觸發(fā)事件選用onchange。 3，離開頁面觸發(fā)的事件選用onbeforeunload。
五、上代碼了，就這么簡單：
$(document).on("change","input,textarea,select",function(){
window.onbeforeunload = function(event) {
return "您編輯的信息尚未保存，您確定要離開嗎？"http://這里內(nèi)容不會顯示在提示框，為了增加語義化。
};
});
六、其他方法
可以保存到一個json里邊，然后比較json是否相同，不過這樣就比較復雜了。 提供一個demo，感興趣的同學看一下效果。
七、遇到的問題。
提示框的樣式不能改變，個人感覺不太美觀，有方法改變的同學一定告訴我哈。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84602.html
摘要：填寫表單時內(nèi)容，當離開頁面或者刷新的時候回丟失頁面的內(nèi)容，因此人性化的設(shè)計該有一個提示。，離開或刷新瀏覽器觸發(fā)事件。五上代碼了，就這么簡單您編輯的信息尚未保存，您確定要離開嗎這里內(nèi)容不會顯示在提示框，為了增加語義化。 一、看圖showImg(https://segmentfault.com/img/bVR8Ny?w=846&h=381); 二、使用場景。 填寫表單時內(nèi)容，當離開頁面或者...
摘要：記錄一些小技巧和踩過的坑由于本篇文章內(nèi)容太多，導致編輯器有點卡，所以新開辟了一篇實踐二，后續(xù)再這里更新。組件的生命周期函數(shù)是在標簽里的數(shù)據(jù)發(fā)生變化時候觸發(fā)數(shù)據(jù)可能更新了，但是沒有綁定到上面的話，不會調(diào)用鉤子函數(shù)。 記錄一些小技巧和踩過的坑 由于本篇文章內(nèi)容太多，導致SF編輯器有點卡，所以新開辟了一篇 vue2實踐（二），后續(xù)再這里更新。 1. props 帶不帶冒號的區(qū)別 ...
摘要：組件卸載生命周期路由跳轉(zhuǎn)和頁面關(guān)閉三者看起來有些類似的地方，比如都是當前組件即將從視口消失，但實際上所觸發(fā)的事件均不相同。至此已經(jīng)實現(xiàn)了路由跳轉(zhuǎn)時提醒用戶進行保存的功能。 React組件卸載生命周期、路由跳轉(zhuǎn)和頁面關(guān)閉三者看起來有些類似的地方，比如都是當前組件即將從視口消失，但實際上所觸發(fā)的事件均不相同。以一個實際案例出發(fā)： 某單頁應(yīng)用的文章編輯頁用戶正在編輯文章，此時尚未保存。當用戶...
閱讀 6940·2021-09-22 15:08
閱讀 1935·2021-08-24 10:03
閱讀 2450·2021-08-20 09:36
閱讀 1331·2020-12-03 17:22
閱讀 2483·2019-08-30 15:55
閱讀 914·2019-08-29 16:13
閱讀 3063·2019-08-29 12:41
閱讀 3260·2019-08-26 12:12
