首页 > 分享 > vue 解决密码框 input 中type=“password“时，浏览器会回显之前保存的用户名和密码

vue 解决密码框 input 中type=“password“时，浏览器会回显之前保存的用户名和密码

花匠小妙招
2025-01-05 22:17

Vue vue 解决密码框 input 中type=“password“时，浏览器会回显之前保存的用户名和密码

input的type="password"时，会出现图中现象，之前保存的用户名和密码回显出来1.为了解决这个问题尝试过以下几种方法：List itemautocomplete=“off”autocomplete=“new-password”在input之前再写一个input 隐藏起来但是发现这三个方法都没什么效果思考灵魂所在：密码框会回显之前保存的账户，是因为设置了t...

樱桃小丸子~ · 2020-03-11 15:53:32 发布

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>

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'); } }, }

Logo