如何解决input中自动填入浏览器记住的密码

现象：当浏览器中有记住的密码时，type 为 password类型的input框会默认填入记住的用户名密码。在某些需求下这种现象很不合理。那么如何去除浏览器input自动填充效果呢，直接上干货。

浏览大量文章大多数给出以下两种解决方法：

1、给input标签写上 autocomplete=”off”

<input type="text" autocomplete="off" >
复制代码

2、在原本的用户名密码输入框之前， 再写一个text输入框和一个password密码框，然后将这两个输入框加上样式“display:none”。网络上给出的解释是，浏览器会讲用户名和密码填入这两个隐藏的输入框，但是在实践中，以下两种设置 display:none 的形式都没有效果

<input type="text" style="display:none;">
<input type="password" style="display:none;">
复制代码

或者

<div style="display:none">
    <input type="text">
    <input type="password">
</div>
复制代码

以上在实践中都未实现想要的效果

以下为有效的两种方式

1、给input框加 autocomplete=”new-password”

<el-input autocomplete="new-password" placeholder="请输入密码" v-model="input" show-password ></el-input>
复制代码

或者

<input type="text" autocomplete="new-password">
复制代码

2、在本来的用户名密码输入框之前加上如下代码（这次用的是opacity哦，和上面是不一样的）

<div style="opacity: 0;height: 0">
    <input type="text">
    <input type="password">
</div>
复制代码

这样浏览器会将密码自动填入这两个input。