用瀏覽器返回按鈕清除表單中的所有字段

Question

當用戶使用瀏覽器返回按鈕時，我需要一種方法來清除表單中的所有字段。現在，瀏覽器會記住所有最後的值，並在您返回時顯示它們。

更多澄清爲什麼我需要這個 我已經禁用的輸入字段的值是自動生成的使用算法來使某一組數據內是唯一的。一旦我提交表單並將數據輸入到數據庫中，用戶就不能再次使用相同的值來提交相同的表單。因此，我首先禁用了輸入字段。但是，如果用戶使用瀏覽器後退按鈕，瀏覽器會記住最後一個值，並且在輸入字段中保留相同的值。因此，用戶可以再次使用相同的值提交表單。

我不明白的是當您按下瀏覽器後退按鈕時究竟發生了什麼。如果頁面大小在瀏覽器高速緩存限制範圍內，似乎整個頁面都從緩存中檢索到，而無需與服務器聯繫。當按下瀏覽器後退按鈕時，如何確保無論瀏覽器設置如何從服務器加載頁面？

Answer 1

現代瀏覽器實現了一種稱爲後退緩存（BFCache）的功能。當你回擊/轉發按鈕時，實際的頁面不會被重新加載（並且腳本不會重新運行）。

如果您必須在用戶點擊後退/前進鍵時執行某些操作 - 監聽BFCache pageshow和pagehide事件。

僞jQuery的例子：

$(window).bind("pageshow", function() { 
    // update hidden input field 
}); 

爲Gecko和WebKit實現查看更多細節。

Answer 2

下面的鏈接可以幫助你..

Browser back button restores empty fields， Clear Form on Back Button?

希望這有助於...祝您好運

Answer 3

我碰到這個職位來到同時尋找一種方式來清除整個窗體與Chrome中的BFCache（後退/前進按鈕緩存）相關。

除了Sim提供的內容外，我的使用案例還需要將詳細信息與Clear Form on Back Button?結合使用。

我發現，要做到這一點的最好辦法是在允許的形式表現爲它期望，並觸發事件：

$(window).bind("pageshow", function() { 
    var form = $('form'); 
    // let the browser natively reset defaults 
    form[0].reset(); 
}); 

如果不處理input事件產生一個對象JavaScript或其他方面，那麼你就完成了。但是，如果您正在收聽的事件，那麼至少在Chrome中，你需要觸發change事件自己（或任何事件中，你要小心輕放，包括一個自定義）：

form.find(':input').not(':button,:submit,:reset,:hidden').trigger('change'); 

必須添加後reset做任何好事。

Answer 4

這是爲我工作。

<script> 
$(window).bind("pageshow", function() { 
    $("#id").val(''); 
    $("#another_id").val(''); 
}); 
</script> 

我最初在我的jquery的$（document）.ready部分，這也工作。不過，我聽說並非所有的瀏覽器在點擊返回按鈕時觸發$（document）.ready，因此我將它取出。我不知道這種方法的優缺點，但是我已經在多個設備上的多個瀏覽器上進行了測試，並且沒有發現此解決方案的問題。

Answer 5

如果您需要與舊版瀏覽器兼容以及「pageshow」選項可能不起作用。以下代碼爲我工作。

$(window).load(function() { 
    $('form').get(0).reset(); //clear form data on page load 
}); 

Answer 6

沒有JavaScript的另一種方法是使用<form autocomplete="off">以防止瀏覽器重新填寫表格與最後的值。

也this question

見只有一個<input type="text"測試此>的形式裏面，但在目前的Chrome和Firefox正常工作，可惜不是在IE10。