使用浏览器返回按钮返回时清除表单中的所有字段

Question

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

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

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

原文由 Prabin Pebam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

如果您必须在用户点击后退/前进键的情况下执行某些操作 - 侦听 BFCache pageshow 和 pagehide 事件：

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

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

原文由 Sim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

另见 这个问题

仅在表单内使用单个 <input type="text" > 进行了测试，但在当前的 Chrome 和 Firefox 中工作正常，不幸的是在 IE10 中不行。

原文由 Michael Sandino 发布，翻译遵循 CC BY-SA 3.0 许可协议