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

Question

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

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

我的 HTML 看起来像这样：

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

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

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

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

它在 Microsoft Edge 中不起作用；刷新页面时，实际值清空，但字段内容保留

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

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

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

有什么帮助或建议吗？

Answer 1

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

<input autocomplete="off">

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

如果它不能在 Edge 上运行，请尝试 fizzix 在此 fiddle 上提供的解决方案。

原始 post Chrome Browser Ignoring AutoComplete=Off.

Answer 2

首先，感谢您的回复。

我试过autocomplete='off'（对不起我忘了说了），但好像没用。

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

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

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

。 . .有了这个：

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

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

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

Answer 3

如果输入在表单元素 <form id="example"> ... </form> 内，那么您可以执行类似 document.getElementById('example').reset() 的操作。您可以在 window.onload.

中调用它

HTMLFormElement.reset()

Answer 4

您可以在值属性中的单引号之间添加space

希望这对刷新页面有用

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

clear input fields on page refresh (Microsoft Edge)

html

javascript

dom

microsoft-edge