input 密码自动填充问题

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

autocomplete="new-password"

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

添加隐藏input标签

在 password 之前加一個隐藏标签 <input type="password" style="display:none">即可。
这个本人没有测试过,但是据说也是和上面的方法一样,有的浏览器支持,有的浏览器依旧不行。

设置input为只读

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

<script>
    setTimeout(function remve(){
          var pass=document.getElementById("pass");
          pass.removeAttribute("readonly");
    },2000);
</script>

<input type="password" id="pass" readonly="readonly" >
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容