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

时间 2019-11-13

标签关于火狐浏览器刷新重置表单元素栏目 Firefox 繁體版

原文原文链接

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

情景demo以下：chrome

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

随便输入一些内容，好比“test”;测试

按F5刷新，展示结果。网站

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

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

<html>.net

<body>code

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

</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后不友好的地方，有待发现

若是你有更好的方案或者对于这个属性更深刻的了解，欢迎留言一块儿讨论

原文参考：