国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js監(jiān)聽離開或刷新頁(yè)面時(shí)的彈窗提示

BoYang / 2063人閱讀

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

一、看圖

二、使用場(chǎng)景。

填寫表單時(shí)內(nèi)容，當(dāng)離開頁(yè)面或者刷新的時(shí)候回丟失頁(yè)面的內(nèi)容，因此人性化的設(shè)計(jì)該有一個(gè)提示。所以這樣的功能也就應(yīng)用而生了。

三、思路。

1，頁(yè)面內(nèi)容改變。2，離開或刷新瀏覽器觸發(fā)事件。

四、知識(shí)點(diǎn)。

1，如圖需要填寫內(nèi)容的地方（即會(huì)發(fā)生改變的地方）包括input[radio],input[text],select,textarea幾種。
2，觸發(fā)事件選用onchange。
3，離開頁(yè)面觸發(fā)的事件選用onbeforeunload。

五、上代碼了，就這么簡(jiǎn)單：

$(document).on("change","input,textarea,select",function(){
    window.onbeforeunload = function(event) {
          return "您編輯的信息尚未保存，您確定要離開嗎？"http://這里內(nèi)容不會(huì)顯示在提示框，為了增加語(yǔ)義化。
    };
});

六、其他方法

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

七、遇到的問題。

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/84602.html

相關(guān)文章

  • js監(jiān)聽離開或刷新頁(yè)面時(shí)的彈窗提示

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

    mikasa 評(píng)論0 收藏0

  • vue2實(shí)踐（持續(xù)更新）

    摘要：記錄一些小技巧和踩過的坑由于本篇文章內(nèi)容太多，導(dǎo)致編輯器有點(diǎn)卡，所以新開辟了一篇實(shí)踐二，后續(xù)再這里更新。組件的生命周期函數(shù)是在標(biāo)簽里的數(shù)據(jù)發(fā)生變化時(shí)候觸發(fā)數(shù)據(jù)可能更新了，但是沒有綁定到上面的話，不會(huì)調(diào)用鉤子函數(shù)。 記錄一些小技巧和踩過的坑 由于本篇文章內(nèi)容太多，導(dǎo)致SF編輯器有點(diǎn)卡，所以新開辟了一篇 vue2實(shí)踐（二），后續(xù)再這里更新。 1. props 帶不帶冒號(hào)的區(qū)別 ...

    n7then 評(píng)論0 收藏0

  • React組件卸載、路由跳轉(zhuǎn)、頁(yè)面關(guān)閉（刷新）之前進(jìn)行提示

    摘要：組件卸載生命周期路由跳轉(zhuǎn)和頁(yè)面關(guān)閉三者看起來有些類似的地方，比如都是當(dāng)前組件即將從視口消失，但實(shí)際上所觸發(fā)的事件均不相同。至此已經(jīng)實(shí)現(xiàn)了路由跳轉(zhuǎn)時(shí)提醒用戶進(jìn)行保存的功能。 React組件卸載生命周期、路由跳轉(zhuǎn)和頁(yè)面關(guān)閉三者看起來有些類似的地方，比如都是當(dāng)前組件即將從視口消失，但實(shí)際上所觸發(fā)的事件均不相同。以一個(gè)實(shí)際案例出發(fā)： 某單頁(yè)應(yīng)用的文章編輯頁(yè)用戶正在編輯文章，此時(shí)尚未保存。當(dāng)用戶...

    leanote 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<