解决浏览器记住密码输入框的问题

2024-07-05 21:37:05

使用HTML属性 autocompleteoff
使用js在页面加载的时候设置input的value为空
增加input typepassword
增加form
最终解决方案
Summary

在浏览器中提交表单后，浏览器一般会提示“是否需要记住密码”，确认后在下次提交表单的时候会自动填充某些输入框。

但是在某些情景下（例如在提现，充值的页面），自动填充密码就很不安全。需要采用一定的手段来阻止浏览器自动填充。

在解决的过程中遇到了一些坑，这里做一下笔记：

使用HTML属性 `autocomplete="off"`

由于自动填充这个特性是浏览器自己实现的，autocomplete这个属性也没有被写入W3C规范。很多浏览器都会直接忽略这个属性。无法禁用自动填充。

使用js在页面加载的时候设置input的value为空

很自然能想到的一个办法，但是浏览器的自动填充居然是在js执行完后再填充的。。。在使用js设置了input的value为空后，浏览器又把input自动填充，无法解决问题。

增加<input type=”password”/>

网上流传甚广的一个方法。这个方法在大部分版本的浏览器上是可行的，但是在某些高版本的浏览器和Safari中失效。后面介绍的几种方法都是基于这个方法的改进。

<!-- 额外增加的input -->
<input type="password" style="display:none"/>
<!-- 原先的input -->
<input type="password"/>

增加form

这个方法较上面那个解决了Safari下自动填充的问题。但是在某些高版本Chrome下失效。（经测试Chrome 46.0可行，Chrome 47.0失效）

<!-- 额外增加的form和input -->
<form style="display:none"><input type="password"/>
</form>
<!-- 原先的input -->
<input type="password"/>

最终解决方案

这个方案结合了上面两种方法，最终连Chrome 47.0下自动填充的问题也解决掉。

<!-- 额外增加的内容 -->
<form style="display:none"><input type="password"/>
</form>
<input type="password" style="width:0;height:0;float:left;visibility:hidden"/>
<!-- 原先的input -->
<input type="password"/>

这个方法中需要注意的是与目标input同辈的input不能设置成 display:none，如果设置后再Chrome 47.0上会自动填充，因此只能使用其他手段把这个input隐藏。

Summary

使用了最后一种方案后在各个浏览器中运行良好，暂时没发现出现自动填充的现象。果然前端的兼容性问题一直是一件让人恶心的事啊。。

解决浏览器记住密码输入框的问题相关推荐

php js记住密码功能,JS中解决谷歌浏览器记住密码输入框颜色改变功能
谷歌浏览器记住密码输入框颜色会改变,并且字体颜色会变成黑色,如图输入框原来的样式是这样的然而记住密码后,输入框颜色就变成了黄色,并且字体变成了黑色这是由于谷歌浏览器的自带样式的缘故: input ...
css解决浏览器记住密码后input框的背景色为淡黄色的代码
谷歌浏览器.在记住密码后,会给用户密码输入框渲染上一个背景色,在有些时候这个浏览器自动使用的渲染背景色会影响页面的UI界面下面是css方法处理解决. input:-webkit-autofill , ...
解决浏览器记住密码后影响表单的问题
用户登录时用户选择记住密码后,在需要用到表单输入框类型为password时,会有历史记录.这是浏览器的自身的问题.我们需要自己解决,网上找了 autocomplete="off" ...
禁止input密码自动填充及浏览器记住密码完整解决方案
完整方案禁止缓存,禁止自动填充,不会触发浏览提示记住密码,其余与正常一致,该方案跨浏览器兼容且易结合任何框架及库使用. npm i nice-pass-word 具体使用参照文档既可以. 下面的内容 ...
layui 解决浏览器自动填充form表单账号和密码输入框的问题
layui 解决浏览器自动填充form表单账号和密码输入框的问题参考文章: (1)layui 解决浏览器自动填充form表单账号和密码输入框的问题 (2)https://www.cnblogs.co ...
Vue+element 解决浏览器自动填充记住的账号密码问题
Vue+element 解决浏览器自动填充记住的账号密码问题参考文章: (1)Vue+element 解决浏览器自动填充记住的账号密码问题 (2)https://www.cnblogs.com/ju ...
浏览器记住用户名密码的解决办法
在做登陆注册模块时,发现一个浏览器的大bug,在在注册页面时,浏览器会自动填充用户名,密码,刚刚要注册的用户,怎么可以直接有默认的用户名密码呢!这是浏览器的记住密码功能,本来是方便登陆的,但是一些浏览 ...
查看ie保存的表单_解决浏览器保存密码自动填充问题
解决浏览器保存密码自动填充问题问题描述话说有一天,我如往常一样打开我的开发网站进行登录操作.浏览器很平常的在我们进行登录操作之后询问我是否需要记住密码,懒惰如我点击了记住密码.一切都很正常的进行着 ...
解决浏览器兼容性问题面试题_如果不解决技术面试问题，就无法解决技术多样性问题。这是数据。...
解决浏览器兼容性问题面试题 by Aline Lerner 通过艾琳·勒纳(Aline Lerner) 如果不解决技术面试问题,就无法解决技术多样性问题. 这是数据. (You can't fix d ...

最新文章

热门文章