当我们在登录页选择记住密码后,如果在之后的页面中还存在type
和name
相同的输入框,比如修改密码或者新建用户时,浏览器会自动填充表单,这并不是我们想要的效果。解决这个问题有以下几个办法:
- 在我们真正想要输入的input前创建一个不显示且type等于password与和真正密码输入框同样name的input
这样浏览器填充的密码就填充在了不显示的输入框内。 - 使用
autocomplete="new-password"
autocomplete
属性是 HTML5 中的新属性,规定了输入字段是否应该启用自动完成功能。理论上该属性兼容所有浏览器,但是在某些浏览器中还是有可能不生效。 - 使用
autocomplete="off"
且修改type
事实上官方提供了autocomplete
的两个属性
并且官方说:
autocomplete
属性适用于<form>
,以及下面的 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。
但是,在测试之后发现,autocomplete="off"
对于除type="password"
外的其他类型都生效,既然其他类型能够生效,那么我们在初始化的时候可以让type="text"
,并设置autocomplete="off"
,当input聚焦时,把type
从tex
t转化为password
就可以了(自动填充一般在表单初始化时生效)。
<input type="text" name="username" autocomplete="off" class="input-text" placeholder="username"/>
<input type="text" name="password" autocomplete="off" class="input-text" onfocus="this.type='password'" placeholder="password"/>
PS::如果使用了react的jsx,要写autoComplete="new-password"
,区分属性大小写。
参考:
如何去除浏览器input自动填充效果
兼容所有浏览器, 关闭记住密码的input的自动填充功能
HTML autocomplete 属性