热搜:m1 nginx 代理 前端

前端禁止浏览器自动填充密码

2024-03-08 21:18:51

浏览器自动填充密码,这个问题,笔者遇到过很多次,也找过很多文章,各种方法都有,甚至还有修改浏览器设置的(这不是自欺欺人吗?)。

不过,好在,经过一番实践,最终找到了一个行之有效的方案,实现非常简单,代码如下:

<input type="password" hidden autocomplete="new-password" style="display: none" />

解释一下上面的代码

传统上,浏览器在用户到达含有表单的页面时,会试图自动完成存储过的用户信息,例如在用户名和密码字段上。然而,某些情况下,可能不希望浏览器进行这样的操作。因此,HTML 5标准中引入了autocomplete属性,可以通过将其设置为off或new-password等来阻止浏览器的自动完成行为。

代码中:

type="password": 指定了该输入框用于输入密码。

hidden: 这个属性是HTML5的新特性,如果元素设置了这个属性,那么此元素在页面上是不可见的。此处可能是用来阻止实际用户操作,仅作为对抗浏览器自动完成的工具。

autocomplete="new-password":此属性用来通知Web浏览器这个控件预计会输入一个新的密码,不应该以常规方式自动填充。尤其在更改密码的场景中非常实用,防止浏览器将旧密码自动填入新密码的输入框。

style="display: none":CSS样式,用于将该元素隐藏,不会在页面上显示出来。