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

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

情景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后不友好的地方,有待发现

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

 

原文参考:

网站兼容——火狐浏览器刷新没有清空表单

浏览器的自动补全问题 autocomplete,刷新页面表单元素还是展示修改后的值

转载于:https://my.oschina.net/u/1417838/blog/743778

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值