html 密码填充,input 密码自动填充问题

今天被一个小小的前端密码属性弄的头疼,现代的浏览器在你登录后会让你保存账号和密码,然后下次使用时可以非常方便帮你自动填充好账号和密码,对用户来说的确很方便,但是有时候开发人员不希望自动填充密码,而且自动填充对有的浏览器识别会出现问题,比如登录后其他页面的input如果有有password属性就会被填充,但明明就不是一个地方的密码......

下面说正题,input标签设置 type="password"属性时,烦人的自动填充就来了,我尝试了各种网上的办法:

autocomplete="new-password"

然并卵,autocomplete 属性的行为标准本来就没有规范化,测试常用的360以及谷歌浏览器居然都无效,摊手,不知道为什么有人可以成功。这边还是记录下,也许其他小伙伴有幸可以成功......

添加隐藏input标签

在 password 之前加一個隐藏标签 即可。

这个本人没有测试过,但是据说也是和上面的方法一样,有的浏览器支持,有的浏览器依旧不行。

设置input为只读

这是本人现在使用的方法,既然浏览器在页面载入完后会进行自动填充,那我就通过readonly属性,直接把password设置为禁止输入,那自然也不会产生自动填充,保险起见通过短暂延时后再移除input的只读属性readonly,这样就跳过了自动填充的步骤,这个方法也不需要考虑浏览器的问题。

setTimeout(function remve(){

var pass=document.getElementById("pass");

pass.removeAttribute("readonly");

},2000);