Symptom: If the browser has a password to remember, the input box of type password is filled with the remembered user name and password by default. In some cases, this makes no sense. So how do you get rid of the auto-fill effect of browser input?

Browse through a large number of articles, most of which offer the following two solutions:

1. Add autoComplete =”off” to the input tag

<input type="text" autocomplete="off" >
Copy the code

2, Before the original username and password fields, write a text field and a password field, and then add the style “display: None” to these two fields. The explanation on the web is that the browser will tell the user name and password to fill in the two hidden fields, but in practice, the display: None setting has no effect

<input type="text" style="display:none;">
<input type="password" style="display:none;">
Copy the code

or

<div style="display:none">
    <input type="text">
    <input type="password">
</div>
Copy the code

None of the above has achieved the desired effect in practice

Here are two effective ways

1, Add autoComplete =”new-password” to input box

<el-input autocomplete="new-password" placeholder="Please enter your password" v-model="input" show-password ></el-input>
Copy the code

or

<input type="text" autocomplete="new-password">
Copy the code

2. Add the following code before the original input box of user name and password (this time using opacity, which is different from above)

<div style="opacity: 0; height: 0">
    <input type="text">
    <input type="password">
</div>
Copy the code

The browser will then automatically fill the password into both inputs.