关于火狐浏览器刷新不重置表单元素

今天测试发现一个问题，经过反复测试发现是浏览器引起的。

情景demo如下：

在某个简单页面中，比如值包含一个text的输入框，内容为空

随便输入一些内容，比如“test”;

按F5刷新，展现结果。

在chrome中输入框内容为初始的空状态

在火狐浏览器中输入框则展现了刚刚输入的 “test” （版本 48.0.2）

<html>

<body>

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

</body>

</html>

在火狐中只有按ctrl+F5 强制刷新才会出现空状态

解决办法：

在网上找到一种办法，就是在元素上加上属性 autocomplete 并设置为off

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

这个属性是HTML5 新增加的，在w3school中找到如下解释（w3school链接）：

autocomplete 属性规定输入字段是否应该启用自动完成功能。

自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

提示：在某些浏览器中，您可能需要手动启用自动完成功能。

HTML 4.01 与 HTML 5 之间的差异

autocomplete 属性是 HTML5 中的新属性。

<input autocomplete="value">

值	描述
on	默认。规定启用自动完成功能。
off	规定禁用自动完成功能。

目前不知道设置成off后不友好的地方，有待发现

如果你有更好的方案或者对于这个属性更深入的了解，欢迎留言一起讨论

原文参考：

来源：oschina

链接：https://my.oschina.net/u/1417838/blog/743778

标签