原由
进入页面浏览器本身有一种机制会默认填充上一次的账号密码。他是根据input标签的type属性进行算法计算,满足条件会自带上次输入过的账号密码(目测:type="text"后紧接着type=“password”)的极容易出现填充。
实现思路
先在页面不使用type=“password”,欺骗浏览器我没有使用密码框。当我实际输入密码时,获取焦点(focus)把自身input的type属性再改成“password” ------ “告诉浏览器,我不是密码框”
保守点:把前面的账号也改一下,欺骗浏览器说:“我不是账号框”
实际代码
(我拿vue-element官方代码做案例)
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="账号">
<el-input v-model="form.username" :type="inpUserType" placeholder="请填写账号" @focus="inpUserType='text'"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password" :type="inpPwdType" placeholder="请输入密码" @focus="inpPwdType='password'"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即登陆</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
inpUserType:"search", // 长得样式跟text一样
inpPwdType:"text",
form: {
username: '',
password: '',
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>