js 實現(xiàn)在離開頁面時提醒未保存的信息(減少用戶重復(fù)操作)
更新時間：2013年01月16日 11:06:24 作者：
在離開頁面時判斷是否有未保存的輸入值,然后進(jìn)行提醒，接下來介紹實現(xiàn)步驟，感興趣的朋友可以了解下
Javascript代碼
//在離開頁面時判斷是否有未保存的輸入值
var hasSaved = false;//是否有輸入的內(nèi)容未保存標(biāo)志，初始值為false
function CheckUnsave(){
if(hasSaved==false){
alert("您上傳的東西尚未保存，請保存后再離開頁面");
return false;}
//return true; //不能加這個語句
}
//保存了則改變狀態(tài)
function ChangeState()
{
hasSaved = true;
}
</script>
在body中加入屬性onbeforeunload
Html代碼
<body onbeforeunload="return CheckUnsave();"><!--一定要加return-->
要在提交action之前調(diào)用ChangeState.
如果按下某個按鈕后離開頁面則不再提醒，比如保存的按鈕，則要在保存的按鈕按下以后，要修改下是否保存的標(biāo)志符的狀態(tài)eg：
Html代碼
<input type="submit" name="Submit" value="保 存" onClick="ChangeState();">
復(fù)制代碼 代碼如下:
//在離開頁面時判斷是否有未保存的輸入值
var hasSaved = false;//是否有輸入的內(nèi)容未保存標(biāo)志，初始值為false
function CheckUnsave(){
if(hasSaved==false){
alert("您上傳的東西尚未保存，請保存后再離開頁面");
return false;}
//return true; //不能加這個語句
}
//保存了則改變狀態(tài)
function ChangeState()
{
hasSaved = true;
}
</script>
在body中加入屬性onbeforeunload
Html代碼
復(fù)制代碼 代碼如下:
<body onbeforeunload="return CheckUnsave();"><!--一定要加return-->
要在提交action之前調(diào)用ChangeState.
如果按下某個按鈕后離開頁面則不再提醒，比如保存的按鈕，則要在保存的按鈕按下以后，要修改下是否保存的標(biāo)志符的狀態(tài)eg：
Html代碼
復(fù)制代碼 代碼如下:
<input type="submit" name="Submit" value="保 存" onClick="ChangeState();">
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)的二叉樹算法,結(jié)合完整實例形式分析了基于JS定義、創(chuàng)建二叉樹及常用的各種遍歷、訪問二叉樹操作技巧,需要的朋友可以參考下2017-04-04
在沒有后端提供數(shù)據(jù)的情況下,前端人員在自己寫demo或者練手項目的時候可以使用mock.js來模擬數(shù)據(jù),本文主要介紹了mock.js模擬數(shù)據(jù)的實現(xiàn),感興趣的可以了解一下2023-11-11
css實現(xiàn)的圖片模糊效果...2007-04-04
bootstrap模態(tài)框跳轉(zhuǎn)到當(dāng)前模板頁面 框消失了而背景存在問題的解決方法
這篇文章主要介紹了bootstrap模態(tài)框跳轉(zhuǎn)到當(dāng)前模板頁面，框消失了，而背景依然存在問題的解決方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
js實時監(jiān)控文本框輸入字?jǐn)?shù)的實例代碼
下面小編就為大家分享一篇實時監(jiān)控文本框輸入字?jǐn)?shù)的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
大家都知道js是不能跨域的，但我們有時候就要這么用，怎么辦呢？辦法總是有的.2009-09-09
微信小程序?qū)崿F(xiàn)計時器開始和結(jié)束功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)計時器開始和結(jié)束功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
在頁面中繪制表格可以滿足我們對數(shù)據(jù)的輸入需求，在js中可以很容易實現(xiàn)，下面有個不錯的示例，感興趣的朋友可以參考下2013-09-09
uniapp微信小程序底部動態(tài)tabBar的解決方案(自定義tabBar導(dǎo)航)
tabBar如果應(yīng)用是一個多tab應(yīng)用,可以通過tabBar配置項指定tab欄的表現(xiàn),以及tab切換時顯示的對應(yīng)頁,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序底部動態(tài)tabBar的解決方案,需要的朋友可以參考下2022-04-04
分別用兩個函數(shù)實現(xiàn)的菜單...2007-05-05