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

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

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

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

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

如果您必须采取某些措施以防用户击退/前进键-监听BFCachepageshow和pagehide事件：

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

查看有关Gecko和WebKit实现的更多详细信息。

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

另请参阅此问题

仅<input type="text"在表单中使用一个>进行了测试，但是在当前的Chrome和Firefox中运行良好，不幸的是在IE10中没有。

我在寻找一种方法来清除与Chrome中的BFCache（后退/前进按钮缓存）相关的整个表单时碰到了这篇文章。

除了Sim所提供的功能外，我的用例还需要将详细信息与“后退按钮上的清除表单”结合使用？。

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

$(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做什么好。

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

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

这对我有用。

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

我最初在$(document).ready我的jquery部分中使用了此方法，该方法也有效。但是，我听说并非所有浏览器都会$(document).ready在按下“后退”按钮时启动，因此我将其取出。我不知道这种方法的优缺点，但是我已经在多种浏览器和多种设备上进行了测试，但未发现此解决方案存在任何问题。

下面的链接可能会帮助您。

浏览器的后退按钮可还原空白字段， 清除后退按钮上的表格？

希望这会有所帮助...祝你好运