问题描述

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

通过autocomplete="off"/autocomplete="new-password"来关闭浏览器自动填充密码的功能, 但某些对于浏览器像edge,firfox等，这种方法并不起作用通过type="text"来解决，当focus时，通过js将type="text"改为type="password"。

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

某些浏览器可能只会识别第一个type="password"的输入框，所以可以在前面添加一些隐藏的type="password"的输入框，来解决这个问题。

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

【资料图】

通过readonly属性来解决，初始化时将readonly设置为true，通过setTimeout来延时设置readonly为false。

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

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

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

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

自定义密码输入框组件解决方案

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

方案一

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

效果如下图所示：

确实没有弹出密码填充的对话框，但样式上并不是很满意。因为实际的输入框被设置成了透明，且在密码显示框之上，所以光标无法显示出来，且无法进行选中一部分内容。

方案二

跟方案一差不多的方式，用input来接收用户输入的密码，但仅改变输入内容的透明度, 由于在opacity为0的情况下设置光标颜色无效，所以要将方案一中的opacity: 0改为:

.password {  color: transparent;  background-color: transparent;  caret-color: #000; /* 光标颜色 */}

但是这会有个问题，选中一部分内容时，会导致透明的内容选中后显现出来，如图所示：

这种情况下可以考虑监听选中事件，当选中一部分内容时，将后面的星号也选中，同时通过::selection伪类来设置选中的内容的背景色，让两个选中的内容颜色一致。要实现这种效果，input显然做不到修改部分内容的背景色，所以可以考虑用span代替input，向其innerHTML中插入带背景色的span：

效果如下：

完整代码在: https://github.com/lxmghct/my-vue-componentssrc/components/PasswordInput/PasswordInput2.vue觉得有帮助的可以在github上点个star~

总结

通过将密码输入框的type设置为text，修改样式上的显示，来实现既可以让浏览器不自动填充密码，又可以隐藏密码的效果。