Question

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

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

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

Answer 1

现代浏览器实现了一种称为后向缓存（BFCache）的东西。当您按后退/前进按钮时，不会重新加载实际页面（并且不会重新运行脚本）。

如果您必须在用户点击后退/前进键时执行某些操作 - 请收听BFCache pageshow和pagehide事件。

伪jQuery示例：

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

查看Gecko和WebKit实施的详细信息。

Answer 2

没有JavaScript的另一种方法是使用<form autocomplete="off">来阻止浏览器使用最后的值重新填充表单。

另见this question

仅使用一个<input type="text"＆gt;进行测试在表单内部，但在当前的Chrome和Firefox中工作正常，遗憾的是在IE10中没有。

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

如果您需要与旧版浏览器兼容，“pageshow”选项可能无效。以下代码为我工作。

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

Answer 5

这对我有用。

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

我最初在我的jquery的$（document）.ready部分中有这个，这也有效。但是，我听说不是所有的浏览器都会按下后退按钮触发$（document）.ready，所以我把它取出来了。我不知道这种方法的优点和缺点，但我已经在多个设备上的多个浏览器上进行了测试，并没有发现此解决方案的任何问题。

Answer 6

以下链接可能对您有所帮助..

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

希望这有助于......祝你好运

使用浏览器后退按钮返回表单中的所有字段

6 个答案: