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

Question

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

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

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

Answer 1

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

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

一个伪jQuery示例:

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

查看Gecko和WebKit实现的更多细节.

Answer 2

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

另见这个问题

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

Answer 3

我在搜索清除与Chrome中的BFCache(后退/前进按钮缓存)相关的整个表单时遇到了这篇文章.

除了Sim提供的内容之外,我的用例还要求细节需要与Back Button上的Clear Form结合使用？.

我发现执行此操作的最佳方法是允许表单按预期运行,并触发事件:

$(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，所以我将其取出。我不知道这种方法的优缺点，但是我已经在多种设备上的多个浏览器上进行了测试，但未发现此解决方案存在任何问题。