在页面刷新时清除输入字段 (Microsoft Edge)

Question

我只是一个初学者，但有人可以帮助我吗？

我有一个带有几个输入字段的 HTML 页面，我希望在刷新页面时清除这些字段。

我的 HTML 看起来像这样：

 <input type='text' id='input_field' value=''>

然后，在我的脚本的开头，有这样的：

 document.getElementById('input_field').value = '';

这在 Firefox 中运行良好；当页面刷新时，该值被清空，该字段被清除。

它在 Microsoft Edge 中不起作用；当页面刷新时，实际值被清空，但该字段的内容仍然存在。

我也试过将我的输入元素包装在一个表单元素中，并使用 JavaScript 重置表单，但结果是一样的。

如您所见，我在 HTML 中保留了 value 属性，但仅用于演示和实验目的。省略它在任何一个浏览器中都没有效果。但是，如果我保留 HTML 属性但省略 JavaScript 语句，则两种浏览器的行为不同：在 Edge 中，字段的内容“赶上”实际值（即字段清除），但仅在页面刷新后两次;而在 Firefox 中，无论页面刷新多少次，这根本无法更新值。

最后，如果我以任何方式编辑源代码，然后在 Edge 中重新加载页面，它会清空实际值并清除该字段，但仅限于初始重新加载时。之后，问题仍然存在。这让我想知道这是否是缓存问题。

有什么帮助或建议吗？

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

Answer 1

首先，感谢您的回复。

我试过 autocomplete='off' （对不起，我忘了说），但它似乎没有用。

不过，就在此处查看回复之前，我决定尝试另一个实验。我在我的页面上添加了一个按钮，单击该按钮会调用一个包含 JavaScript .value = '' 语句的函数。

无论出于何种原因，这都很好用；它清空了值并清除了字段，这让我想到将“重置”绑定到特定的 HTML 事件可能是关键。我尝试了一些没有用的东西，但最后我只是替换了这个：

 document.getElementById('input_field').value = '';

…有了这个：

 window.onload = function() {
  document.getElementById('input_field').value = '';
  }

…就是这样。每次我在 Firefox 或 Edge 中刷新页面时，该值都被清空并且该字段被清除。

我不确定为什么会这样（就像我说的，我才刚刚开始使用这些东西），但就是这样。

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

Answer 2

添加属性 autocomplete="off" 到 <input> 标签。

 <input autocomplete="off">

这可能不适用于所有浏览器。有关浏览器支持图表，请参阅此站点： https://caniuse.com/#feat=input-autocomplete-onoff

如果它不能在 Edge 上运行，请尝试 fizzix 在这个 小提琴 上提供的解决方案。

原帖 Chrome 浏览器 Ignoring AutoComplete=Off 。

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