使用“返回”按钮返回时，清除窗体中的所有字段

当用户使用浏览器返回按钮时，我需要一种方法来清除表单中的所有字段。现在，浏览器会记住所有最后的值，并在返回时显示它们。

进一步说明我为什么需要这个 我有一个禁用的输入字段，它的值是通过一种算法自动生成的，这种算法使其在特定的一组数据中是唯一的。一旦我提交了表单，数据输入到数据库中，用户就不能再次使用相同的值来提交相同的表单。因此，我首先禁用了输入字段。但是如果用户使用浏览器的返回按钮，浏览器会记住最后一个值，同样的值会保留在输入字段中。因此，用户可以再次提交具有相同值的表单。

我不明白的是当你按下浏览器返回按钮时会发生什么。如果页面大小在浏览器缓存限制之内，那么似乎从缓存中检索整个页面时不需要与服务器联系。当您按下浏览器后退按钮时，如何确保无论浏览器设置如何，页面都是从服务器加载的？

133335 次浏览
小开
最佳答案

Modern browsers implement something known as back-forward cache (BFCache). When you hit back/forward button the actual page is not reloaded (and the scripts are never re-run).

If you have to do something in case of user hitting back/forward keys - listen for BFCache pageshow and pagehide events:

window.addEventListener("pageshow", () => {
// update hidden input field
});

See more details for Gecko and WebKit implementations.

小开

I came across this post while searching for a way to clear the entire form related to the BFCache (back/forward button cache) in Chrome.

In addition to what Sim supplied, my use case required that the details needed to be combined with Clear Form on Back Button?.

I found that the best way to do this is in allow the form to behave as it expects, and to trigger an event:

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

If you are not handling the input events to generate an object in JavaScript, or something else for that matter, then you are done. However, if you are listening to the events, then at least in Chrome you need to trigger a change event yourself (or whatever event you care to handle, including a custom one):

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

That must be added after the reset to do any good.

小开

This is what worked for me.

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

I initially had this in the $(document).ready section of my jquery, which also worked. However, I heard that not all browsers fire $(document).ready on hitting back button, so I took it out. I don't know the pros and cons of this approach, but I have tested on multiple browsers and on multiple devices, and no issues with this solution were found.

小开

If you need to compatible with older browsers as well "pageshow" option might not work. Following code worked for me. 

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

Another way without JavaScript is to use <form autocomplete="off"> to prevent the browser from re-filling the form with the last values.

See also this question

Tested this only with a single <input type="text"> inside the form, but works fine in current Chrome and Firefox, unfortunately not in IE10.

小开

As indicated in other answers setting autocomplete to "off" does the trick, but in php, what worked for me looks like this...

$form['select_state'] = array(
'#type' => 'select',
'#attributes' => array('autocomplete' =>'off'),
'#options' => $options_state,
'#default_value' => 'none');
小开

Because I have some complicated forms with some fields that are pre-fill by JS, clearing all fields is not suitable for me. So I found this solution, it detects the page was accessed by hitting the back/forward button and then does a page reload to get everything back to its original state. I think it will be useful to someone:

window.onpageshow = function(event) {
if (event.persisted || performance.getEntriesByType("navigation")[0].type === 'back_forward') {
location.reload();
}
};

提交答案