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

Question

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

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

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

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

Answer 1

没有JavaScript的另一种方法是使用<form autocomplete="off">防止浏览器使用最后的值重新填充表单。仅<input type="text"在表单内部使用单个>进行测试，但在当前的Chrome和Firefox中工作正常，遗憾的是在IE10中没有。

Answer 2

我在搜索清除与Chrome中的BFCache（后退/前进按钮缓存）相关的整个表单时遇到了这篇文章。除了Sim提供的内容之外，我的用例还要求细节需要与Back Button上的Clear Form结合使用？。我发现执行此操作的最佳方法是允许表单按预期运行，并触发事件：$(window).bind("pageshow",&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;form&nbsp;=&nbsp;$('form');&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;let&nbsp;the&nbsp;browser&nbsp;natively&nbsp;reset&nbsp;defaults &nbsp;&nbsp;&nbsp;&nbsp;form[0].reset();});如果您没有处理input事件以在JavaScript中生成对象，或者其他事情，那么您就完成了。但是，如果您正在收听事件，那么至少在Chrome中您需要自己触发change事件（或者您需要处理的任何事件，包括自定义事件）：form.find(':input').not(':button,:submit,:reset,:hidden').trigger('change');必须添加后在reset做什么好。