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

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

另请参阅this question

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

---

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

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

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

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

---

我在寻找一种方法来清除与 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 之后添加 才能起到任何作用。

---

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

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

---

这对我有用。

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

我最初在我的 jquery 的 $(document).ready 部分有这个，它也有效。但是，我听说并非所有浏览器都会在点击返回按钮时触发 $(document).ready，所以我将其删除。我不知道这种方法的优缺点，但是我在多个浏览器和多个设备上进行了测试，没有发现这个解决方案的问题。

---

如其他答案所示，将自动完成设置为“关闭”可以解决问题，但在 php 中，对我有用的东西看起来像这样......

$form['select_state'] = array(
'#type' => 'select',
'#attributes' => array('autocomplete' =>'off'),
'#options' => $options_state,
'#default_value' => 'none');

---

因为我有一些复杂的表单，其中一些字段是由 JS 预先填写的，所以清除所有字段不适合我。所以我找到了这个解决方案，它通过点击后退/前进按钮检测到页面被访问，然后重新加载页面以使所有内容恢复到原始状态。我认为这对某人有用：

window.onpageshow = function(event) {
    if (event.persisted || performance.getEntriesByType("navigation")[0].type === 'back_forward') {
        location.reload();
    }
};

---