在javascript中編輯提示

Question

在我的Web應用程序中，我有一個包含多個輸入值的頁面，並且想要確認用戶想要離開頁面（如果用戶嘗試使用未保存的信息輸入）（類似於提示退出Microsoft Word時文檔上未保存的更改）。我想要顯示一條自定義信息：「您所做的更改尚未保存，您是否真的想離開頁面？」我怎麼能這樣做呢？

Answer 1

您需要在所有輸入中使用change事件來檢測用戶所做的任何更改。此事件不會冒泡，因此您需要將其分別附加到每個輸入。然後，您需要使用window對象的beforeunload事件來提示用戶。

<script type="text/javascript"> 
    var anythingEdited = false; 

    function inputChanged() { 
     anythingEdited = true; 
    } 

    window.onbeforeunload = function(evt) { 
     if (anythingEdited) { 
      evt = evt || window.event; 
      evt.returnValue = "You have edited something. If you click OK, your changes will be lost."; 
     } 
    }; 
</script> 

First name: <input type="text" id="firstName" name="firstName" onchange="inputChanged();">