解决浏览器自动填充密码的问题

用微信扫码二维码

分享至好友和朋友圈

浏览器对于的输入框会自动填充密码，但有时出于安全或者其他原因，我们不希望浏览器记住并自动填充密码。通过网上查到的一些解决方案，可以总结出以下几种解决方案(主要用edge浏览器进行测试)：

type="password"

但同样对某些浏览器不起作用，如edge，在点击输入框时，仍会自动弹出填充密码的提示框。

form>

但同样并不是总是有效，拿edge测试时即使前几个密码输入框没有隐藏，最后一个输入框也会自动填充密码,如图:

setTimeout(() => { document.getElementById('passwordInput').removeAttribute('readonly')}, 100)

但同样并非总是有效，拿edge测试时，虽然点击输入框时并没有弹出填充密码的提示框，但是在输入框中输入密码然后退格到输入框为空时，又会重新弹出填充密码的提示框。

上述几种方法除了会弹出填充密码的提示框外，在页面跳转或刷新时(如edge浏览器)，都会弹出保存密码的提示框，如图:

当然，应该还会有其他解决方案我暂时还没找到，如果有的话，欢迎留言。

在尝试了上述几种解决方案后，发现效果都不是很好，所以我感觉只有让的属性始终为，才能更有效的解决这个问题。可以考虑自定义一个密码输入框组件，通过某些方法去改变的值的显示方式，来达到隐藏密码的效果。目前想出了两种方法：一个是不改变的值，仅仅隐藏的内容，用另一个容器去显示密码或者显示；另一个是将实际密码存在另一个变量中，将的值改成来显示。

input

type

password

input

input

input

input

value

可以用两个来实现，父容器是定位，两个都是，一个实际的输入框位于上层，设置为透明，另一个用于显示星号的输入框位于下层。

input

relative

input

absolute

div>

特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.