浏览器为type='password'的input自动填充账号密码的解决办法

1,394 阅读2分钟

最近给网站页面加了修改密码的功能,但是刷新页面之后发现type='password'input被自动填充了一个密码串,而在页面中DataTables右上角的搜索框被填充了一个账号...

懵逼ing......

不过很快反应过来,因为被填充的账号很熟悉,正是我经常使用的后台账号,因为后台经常使用所以自然就用浏览器记住了密码,每次打开后台登录页时就被浏览器自动填充了账号密码;而我加了修改密码的页面也是后台下的页面,属于同域,所以也被浏览器给自动填充了。

找到原因就好说了,先从浏览器中把记住的密码删除掉,重新刷新页面后一切正常。

但这不是解决办法,密码总得记住的,经过百度查询后有两种办法可以解决 :

1.autocomplete=“new-password”

autocompleteHTML5的一个新属性,规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。autocomplete="off"可以避免点击输入框时弹出历史输入记录,但对这里的自动填充并没有效果。

填入autocomplete="new-password"可以解决,这表示input内容将是新密码,不可被填充旧密码。

2.设置隐藏的input来李代桃僵

页面中有几个密码输入框,就在第一个密码输入框之前加入几个新的密码输入框,并且设置CSS样式为display: none,这样最开始的密码框就被填充了内容,而我们正常需要的密码框则未受影响。