JavaScript中onbeforeunload不起作用

我似乎有問題使用onbeforeunload事件來警告用戶，如果他們從未保存的表單數據導航離開頁面。我寫了一個最小的頁面，但仍然不起作用。如果我正在導航或重新加載頁面，此頁面有時會提醒我，但有時不會，並且我看不到原因。有時它會問我什麼時候沒有改變表單的值。我看過其他問題，據我所知，我所做的是對的。我究竟做錯了什麼？JavaScript中onbeforeunload不起作用

<html> 
<body> 

<script> 

window.onload = function() { doRecord(); }; 
window.onbeforeunload = function() { return doCheck(); }; 

setTimeout(doCheck, 5000);; 

var storeValue = ""; 

function doRecord() 
{ 
    var inp = document.getElementById("theinput"); 
    storeValue = inp.value; 
    console.log("Running doRecording"); 
} 

function doCheck() 
{ 
    console.log("Running doCheck"); 

    var inp = document.getElementById("theinput"); 

    console.log("Comparing '" + storeValue + "' to '" + inp.value + "'"); 

    if (storeValue != inp.value) 
    { 
    console.log("It has changed"); 
    return "Are you sure that you want to leave this page, value has changed"; 
    } 
    else 
    { 
    console.log("It's OK"); 
    return null; 
    } 
} 

</script> 

<h3>Form</h3> 
<form id="myform" method="post" action="process.php" onsubmit="window.onbeforeunload = null" > 
<input type="text" size="20" name="sometext" id="theinput" value="Change This" /> 
<p> 
<input type=submit /> 
</form> 

</body> 
</html>

來源

2016-08-25 user3748029

僅當您的輸入爲空時纔會顯示警告？ –

window.onload會等待圖像和其他資源（如外部CSS和JS）完全加載。你可能在onload被觸發之前開始編輯，所以你的更新值被存儲在storeValue中。 console.log說什麼？ – jedifans

您的代碼正常工作 – Abanoub

此代碼看起來不正確： <form id="myform" method="post" action="process.php" onsubmit="window.onbeforeunload = null" >

如果不是這樣： <form id="myform" method="post" action="process.php" onsubmit="return (window.onbeforeunload()== null)" >

我在做我創建here這個現在看來OK小提琴這種變化。

來源

2016-08-25 07:02:57 Dhananjay

這將停止提交表單。 OP的代碼是刪除卸載處理程序，以便表單可以加載下一頁。你是正確的，onsubmit應該返回一些truthy雖然。 – jedifans

我以爲OP打算這樣即停止表單提交如果在window.onbeforeunload'檢查失敗，雖然它看起來很奇怪，我沒有看到它用這種方式 – Dhananjay

我相信我們的目標是，爲了避免失去他們的變化，用戶必須提交表單而不是導航或關閉標籤。 – jedifans

JavaScript中onbeforeunload不起作用

回答

相關問題