HTML的Input组件可以在初始化时,通过value属性设置原始值。如
<input type="text" size="30" value="测试">
一段网页HTML代码一直运行的很好。因需要,在其中新增了H5 中才有的新input组件,如date
<input type="date" value="2023-01-07">
应该说,H5的这些新增类型组件,如color、date、email等可以应付绝大多数需求。但是,引入这一小行H5代码后,出现了一个不曾预料的问题。突然发现,包括原有的text在内的input组件的初始化value值都不起作用了。
在分析错误原因时,发现这些组件会自动保留上一次手工设置的值。通过学习,这才知道H5 里头有一个属性autocomplete,指示是否启用自动填充功能。 自动填充启动后,浏览器基于之前键入过的值,显示出在字段中填写的选项。 缺省状态下,autocomplete是打开的。根据对autocomplete的解释,理论上字段只有在用户开始输入时才填充,但是实践中,没想到有些浏览器会在初始化时就填充了,并且优先级还高于value属性。为了解决这个问题,需要将autocomplete 关闭。
<input type="text" autocomplete="off" size="30" value="测试">
<input type="date" autocomplete="off" value="2023-01-07">
如上图,将autocomplete 设置为 off,这个错误就不存在了。最后,检验了一下Chrome、Firefox、Opera、Edge,发现只有 Firefox有这个问题。