如何在Web頁面退出前提示用戶保存數據?

 當用戶在使用一個頁面進行數據的新增或者修改時,用戶可能已經修改頁面上的某些數據,這個時候用戶由於誤錯作點擊了離開改頁面的按鈕或者鏈接,用戶剛纔所做的工作將會全部作廢,爲了做到個性化,此時應該給用戶已經做過修改,是否真的不保存就要離開的提示。要實現以上效果需做一下幾項工作:

1、 判斷表單上的值是否被修改過。

2、 表單在跳轉或者關閉前要根據1中的條見進行判斷,當用戶不是進行真正提交事件時提示用戶有數據修改但沒有保存,用戶點擊否可以取消剛纔的操作。

鑑於以上的分析,使用一下的方法來進行:

1、  頁面上加一個隱藏域來保存表單是否被修改過。

<input type="hidden" id="txtFlag" value="0" />

function ValueChanged()

{

   document.getElementById("txtFlag").value = 1;//一表示表單值已經被修改過

}

讓表單中所有input、select(對應到ASP.NET中爲TextBox、DropDownList、RadioButton等服務器端控件)類型元素的onchange(值改變),onkeypress(有輸入情況), onpaste(粘貼值)等改變input、select值的事件執行ValueChanged()函數

2、  在body的onbeforeunload事件中根據txtFlag的值提示用戶保存,具體函數如下:

function CloseIt()

{

  if(document.getElementById("txtFlag").value !="0")//如果txtFlag的值不爲0則提示

      event.returnValue = "頁面值已經修改,是否真的不保存?";

}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章