Html 使用浏览器后退按钮返回时清除表单中的所有字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8861181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clear all fields in a form upon going back with browser back button
提问by Prabin Pebam
I need a way to clear all the fields within a form when a user uses the browser back button. Right now, the browser remembers all the last values and displays them when you go back.
当用户使用浏览器后退按钮时，我需要一种方法来清除表单中的所有字段。现在，浏览器会记住所有最后的值，并在您返回时显示它们。
More clarification on why I need thisI've a disabled input field whose value is auto-generated using an algorithm to make it unique within a certain group of data. Once I've submitted the form and data is entered into the database, user should not be able to use the same value again to submit the same form. Hence I've disabled the input field in the first place. But if the user uses the browser back button, the browser remembers the last value and the same value is retained in the input field. Hence the user can submit the form with the same value again.
关于为什么我需要这个的更多说明我有一个禁用的输入字段，它的值是使用算法自动生成的，使其在特定数据组中是唯一的。一旦我提交了表单并将数据输入到数据库中，用户就不能再次使用相同的值来提交相同的表单。因此，我首先禁用了输入字段。但是如果用户使用浏览器的后退按钮，浏览器会记住最后一个值，并且相同的值会保留在输入字段中。因此，用户可以再次提交具有相同值的表单。
What I don't understand is what exactly happens when you press the browser back button. It seem like the entire page is retrieved from cache without ever contacting the server if the page size is within the browser cache limit. How do I ensure that the page is loaded from the server regardless of browser setting when you press the browser back button?
我不明白的是当您按下浏览器后退按钮时到底发生了什么。如果页面大小在浏览器缓存限制内，似乎整个页面都是从缓存中检索的，而无需联系服务器。当您按下浏览器后退按钮时，如何确保无论浏览器设置如何都从服务器加载页面？
采纳答案by Sim
Modern browsers implement something known as back-forward cache (BFCache). When you hit back/forward button the actual page is not reloaded (and the scripts are never re-run).
现代浏览器实现了一种称为后向缓存 (BFCache) 的东西。当您点击后退/前进按钮时，实际页面不会重新加载（并且脚本永远不会重新运行）。
If you have to do something in case of user hitting back/forward keys -- listen for BFCache pageshowand pagehideevents.
如果您必须在用户按下后退/前进键的情况下执行某些操作 - 侦听 BFCachepageshow和pagehide事件。
A pseudo jQuery example:
一个伪 jQuery 示例：
$(window).bind("pageshow", function() {
// update hidden input field
});
回答by Michael Sandino
Another way without JavaScript is to use <form autocomplete="off">to prevent the browser from re-filling the form with the last values.
另一种不使用 JavaScript 的方法是使用<form autocomplete="off">防止浏览器用最后一个值重新填充表单。
See also this question
另见这个问题
Tested this only with a single <input type="text"> inside the form, but works fine in current Chrome and Firefox, unfortunately not in IE10.
仅使用<input type="text"表单内的单个>对此进行了测试，但在当前的 Chrome 和 Firefox 中工作正常，不幸的是在 IE10 中不行。
回答by pickypg
I came across this post while searching for a way to clear the entire form related to the BFCache (back/forward button cache) in Chrome.
我在寻找一种方法来清除与 Chrome 中的 BFCache（后退/前进按钮缓存）相关的整个表单时遇到了这篇文章。
In addition to what Sim supplied, my use case required that the details needed to be combined with Clear Form on Back Button?.
除了 Sim 提供的内容之外，我的用例还要求将详细信息与后退按钮上的清除表单结合起来？.
I found that the best way to do this is in allow the form to behave as it expects, and to trigger an event:
我发现最好的方法是让表单按预期运行，并触发一个事件：
$(window).bind("pageshow", function() {
var form = $('form');
// let the browser natively reset defaults
form[0].reset();
});
If you are not handling the inputevents to generate an object in JavaScript, or something else for that matter, then you are done. However, if you are listening to the events, then at least in Chrome you need to trigger a changeevent yourself (or whatever event you care to handle, including a custom one):
如果您没有处理input事件以在 JavaScript 中生成对象，或者其他与此相关的事情，那么您就完成了。但是，如果您正在侦听事件，那么至少在 Chrome 中您需要自己触发一个change事件（或您需要处理的任何事件，包括自定义事件）：
form.find(':input').not(':button,:submit,:reset,:hidden').trigger('change');
That must be added afterthe resetto do any good.
必须添加后在reset做什么好。
回答by Asanka Siriwardena
If you need to compatible with older browsers as well "pageshow"option might not work. Following code worked for me.
如果您需要与旧浏览器兼容以及“pageshow”选项可能不起作用。以下代码对我有用。
$(window).load(function() {
$('form').get(0).reset(); //clear form data on page load
});
回答by Randy Greencorn
This is what worked for me.
这对我有用。
$(window).bind("pageshow", function() {
$("#id").val('');
$("#another_id").val('');
});
I initially had this in the $(document).readysection of my jquery, which also worked. However, I heard that not all browsers fire $(document).readyon hitting back button, so I took it out. I don't know the pros and cons of this approach, but I have tested on multiple browsers and on multiple devices, and no issues with this solution were found.
我最初在$(document).ready我的 jquery 部分有这个，这也有效。但是，我听说并非所有浏览器都会$(document).ready在点击后退按钮时触发，所以我将其删除。我不知道这种方法的优缺点，但我已经在多个浏览器和多个设备上进行了测试，没有发现这个解决方案的问题。
回答by Fahim Parkar
Below links might help you..
下面的链接可能对你有帮助..
Browser back button restores empty fields, Clear Form on Back Button?
Hope this helps... Best Luck
希望这有助于... 祝你好运
