Question

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

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

我的HTML看起来像这样：

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

然后，在我的剧本开头，有这个：

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

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

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

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

正如您所看到的，我在HTML中保留了value属性，但仅用于演示和实验。省略它对任一浏览器都没有影响。但是，如果我保留HTML属性但省略了JavaScript语句，则两种浏览器的行为都不同：在Edge中，字段的内容＆＃34;赶上＆＃34;到实际值（即字段清除），但仅在页面刷新两次后;并且在Firefox中，无论页面刷新多少次，都无法更新该值。

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

任何帮助或建议？

Answer 1

将属性autocomplete="off"添加到<input>代码。

<input autocomplete="off">

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

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

原帖[{3}}。

Answer 2

首先，感谢您的回复。

我曾尝试autocomplete='off'（对不起，我忘了提及），但似乎没有用。

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

无论出于何种原因，这都很好;它清空了值并清除了字段，这让我觉得将“重置”绑定到特定的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()

页面刷新时清除输入字段（Microsoft Edge）

3 个答案: