vue 解决密码框 input 中type=“password“时,浏览器会回显之前保存的用户名和密码
input的type="password"时,会出现图中现象,之前保存的用户名和密码回显出来1.为了解决这个问题尝试过以下几种方法:List itemautocomplete=“off”autocomplete=“new-password”在input之前再写一个input 隐藏起来但是发现这三个方法都没什么效果思考灵魂所在:密码框会回显之前保存的账户,是因为设置了t...
·
input的type="password"时,会出现图中现象,之前保存的用户名和密码回显出来
1.为了解决这个问题尝试过以下几种方法:
- autocomplete=“off”
- autocomplete=“new-password”
- 在input之前再写一个input 隐藏起来
但是发现这三个方法都没什么效果
-
思考灵魂所在:
密码框会回显之前保存的账户,是因为设置了type=“password”,所以我们只需要改变text类型即可
// 这里用的是vuetify 框架
<v-text-field
v-model="form.pwd"
:rules="pwdRules"
:label="form.pwd.title"
:append-icon="show1 ? 'visibility' : 'visibility_off'"
type="text"
@click:append="show1 = !show1,setPwdType('pwd',show1,form.pwd)"
id="pwd"
>
</v-text-field>
// 监听数据,有变化就调用setPwdType方法
watch:{
'form.pwd': function(val){
this.setPwdType('pwd',this.show1,val)
},
methods:{
// 设置密码框的类型,防止浏览器保存的密码回显
setPwdType(id,show,val){
let len = val?val.length : 0
if(!show && len){
document.getElementById(id).setAttribute('type','password');
}else{
document.getElementById(id).setAttribute('type','text');
}
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)