制作页面告诉浏览器不要缓存/保留输入值

Question

大多数浏览器会缓存表单输入值。所以当用户刷新页面时，输入框中的内容仍保持不变。

这里出现的问题是：当用户点击“保存”按钮后，服务器会验证POST的数据（例如勾选的产品），如果无效，则会将其发送回浏览器。然而，正如上述所述，即使服务器清除了某些值的选择，由于浏览器缓存，它们仍然可能被选择！

我的数据具有不可见的复选框（直到父项被选中才显示），因此用户可能甚至没有意识到之前的某个值仍然被选择，直到再次点击“保存”并收到错误消息时 - 尽管用户认为它没有选中。这很烦人。

可以通过执行Ctrl + F5来解决这个问题，但这甚至不是一个解决方案。是否有一种自动/程序化的方法告诉浏览器在某些表单/页面上不要缓存表单输入数据呢？

- queen3

---

“<form autocomplete="off"…” 对你来说是一个选项吗？这个问题是在所有浏览器中出现，还是只有特定的一个？ - David Kolar

有没有一种方法可以通过下拉<select>列表来回答这个问题。我有一个列表，并定义了一个“selected”选项，但刷新页面会保留先前选择的选项。 - Martin

我想实现相反的效果 - 在点击后退按钮时保留每个页面的输入值（点击两次后退按钮，相应地获取输入）。有很多使用大量JS代码的示例（在我看来并不真正有效），但是 - 是否有更简单的方法？我尝试在表单和输入字段上都使用autocomplete =“on”，但不起作用。浏览器是Chrome。 - Dmitry z

Answer 1

你是否明确地将值设置为空？例如：

<input type="text" name="textfield" value="">

这样可以防止浏览器把数据放在不应该放的地方。或者，您可以将autocomplete属性添加到表单标记中：

<form autocomplete="off" ...></form>

- DisgruntledGoat

---

我谈论复选框，所以不能将值设置为“”。而且，“autocomplete off”是否意味着不仅在下拉自动完成列表中，而且在用户按F5时不存储表单输入值？ - queen3

根据https://developer.mozilla.org/en/How_to_Turn_Off_Form_Autocompletion，autcompletion=off会影响“会话历史记录缓存”，至少在Gecko中是如此。我将测试它是否适用于我所需的内容。 - queen3

@queen3：是的，复选框是一个问题，因为没有明确表示“未选中”的方法。如果你仍然遇到问题，可以尝试使用checked="false"，在一些浏览器中可能有效。另一个选择是使用Javascript/jQuery，在页面加载时显式地取消所有复选框的选中状态。 - DisgruntledGoat

@queen3，你的意思是“autocomplete=off”，而不是“autocompletion=off”。 - Matt Baker

所有的答案和建议对我都没有用。正在使用Chrome并开发.NET。 - hakan

Answer 2

从Stack Overflow参考资料中得知：

如果浏览器已经保存了值，使用value =""将无法生效，因此您应该添加以下内容。

对于标签，可以设置属性autocomplete：

<input type="text" autocomplete="off" />

您也可以为表单使用自动完成功能。

- shareef

---

在 Chrome 中，对于单个表单元素使用 autocomplete="off" 属性似乎没有效果，即使显式将 value 属性设置为空，并且发送 Cache-Control: Must-Revalidate 头也没有效果。我必须将 autocomplete="off" 属性应用于 <form> 元素本身才能在 Chrome 中抑制此行为。 - mindplay.dk

我在表单上使用了autocomplete="off"，但它对我没有起作用。 - Kingsley Simon

我需要更多信息，@KingsleySimon，例如浏览器，您的浏览器可能有一些设置阻止正确的行为。 - shareef

浏览器的行为似乎已经改变了：https://developer.mozilla.org/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion - david

请注意HTML的有效表单。例如，它不是一个嵌套在另一个表单中的表单等。 - shareef

Answer 3

基本上，有两种方法可以清除缓存：

<form autocomplete="off"></form>

或者

$('#Textfiledid').attr('autocomplete', 'off');

- Anand Dwivedi

Answer 4

另一种方法是在HTML表单之后立即使用JavaScript重置表单：

<form id="myForm">
  <input type="text" value="" name="myTextInput" />
</form>

<script type="text/javascript">
  document.getElementById("myForm").reset();
</script>

- pmko

Answer 5

这在新的浏览器中对我有效：

autocomplete="new-password"

- erikrunia

Answer 6

将 type 和 autoComplete 添加到 inputProps 中：

<TextField
    placeholder="password"
    onChange={(e) => setFieldValue("password", e.target.value)}
    inputProps={{
        type: "password",
        autoComplete: 'new-password'
    }}
/>

- ParisaN