Recently, it was found that the main solutions to solve the problem of el-Input automatic password filling are as follows:

1. Set the autoComplete property;

 <el-input type="password"
	    v-model="passwordForm.checkPass"
	    auto-complete="new-password"
	    >
Copy the code

2. Add readonly&onfocus = “this.removeAttribute (‘readonly’);

<input type="password" name="Password" autocomplete="off" readonly 
onfocus="this.removeAttribute('readonly');" >
Copy the code

The above two methods, in Chrome version 87.0.4280.141, do not turn off the browser password prompt function and automatic login function (figure below), try, but do not work

Finally found the following way to solve the problem, effective trial:

<el-form-item label=" user name" prop="user_name"> <el-input V-model ="info.user_name" :disabled="updateFlag" Auto-complete ="off" name="person.user.user_name"></el-input> </el-form-item> <el-form-item label=" vendor "prop=" Factory "> <el-input v-model="info.factory" auto-complete="off" name="person.user.factory"></el-input> </el-form-item> < el - form - the item label = "password" prop = "password" > < el - input v - model = "info. Password: type =" ((newPwdReadOnly && info. Password) | |  info.password)? 'password':'text'" auto-complete="new-password" name="person.user.new_password" @focus="newPwdFocus($event)" :readonly="newPwdReadOnly" @blur="newPwdBlur($event)" ref="newPwdRef"></el-input> </el-form-item> <el-form-item Label = "confirm password" prop = "confirmPwd > <" el - input v - model = "info. ConfirmPwd" : type = "((rePwdReadOnly && info. ConfirmPwd) | | info.confirmPwd)? 'password':'text'" auto-complete="confirm-password" name="person.user.re_password" @focus="newPwdFocus($event, false)" :readonly="rePwdReadOnly" @blur="newPwdBlur($event, False)" ref="reNewPwdRef"></el-input> </el-form-item>" Click the input box with type="password" when the content is empty or click twice (multiple times), the password box will still pop up, so add type to it to switch between password and text (only for the first multiple clicks). Add focus,blur and readOnly to the input of type="password".Copy the code

newPwdFocus(evt, isNew = true) { if (evt) { evt.stopPropagation(); evt.preventDefault(); } setTimeout(() => { if (isNew) { this.newPwdReadOnly = false; } else { this.rePwdReadOnly = false; }}, 100); }, newPwdBlur(evt, isNew = true) { if (evt) { evt.stopPropagation(); } if (isNew) { this.newPwdReadOnly = true; } else { this.rePwdReadOnly = true; }}, the key is the delay of setTimeout 0. The above is not completely solved, input the content, then press Enter to delete the content, and find that the automatic filling box comes out again, so you need to watch the following:

watch: { "info.password": function () { if (this.info.password === "") { this.newPwdReadOnly = true; this.newPwdFocus(null); } }, "info.confirmPwd": function () { if (this.info.confirmPwd === "") { this.rePwdReadOnly = true; this.newPwdFocus(null, false); }}},Copy the code

Click on the input box type=”password” when the content is empty or click twice (multiple times) will still pop up the password box. Or enter the password, back to clear and click again will pop up the automatic fill box. Add a mouseDown event (not keyDown, not click)

addClickEvt() { if (this.$refs.newPwdRef) { this.$refs.newPwdRef.$refs.input.onmousedown = (evt) => { if (evt) { evt.preventDefault(); evt.stopPropagation(); } if (this.info.password === "" || this.newPwdReadOnly) { this.$refs.newPwdRef.$refs.input.blur(); setTimeout(() => { this.$refs.newPwdRef.$refs.input.focus(); }, 0); } return false; }; } if (this.$refs.reNewPwdRef) { this.$refs.reNewPwdRef.$refs.input.onmousedown = (evt) => { if (evt) { evt.preventDefault(); evt.stopPropagation(); } if (this.info.confirmPwd === "" || this.rePwdReadOnly) { this.$refs.reNewPwdRef.$refs.input.blur(); setTimeout(() => { this.$refs.reNewPwdRef.$refs.input.focus(); }, 0); } return false; }; }}, the mouseDown event will be triggered when the password box is clicked (or clicked more than once). Perfect solution! Personally, I thought it would be enough to actually bind mousedown's processing logic directly (didn't try).Copy the code