浏览器自动填充

1、问题：在一个项目里发现，当浏览器里面存在form，然后里面有input的type为password时,就会触发浏览器自动填充，并把上一个type为text的input当成账号填充

 

2、原因：就是浏览器自动填充惹的祸，而且不同浏览器的自动填充规则不同，如360是根据form、name和password来填充，谷歌是根据form、password

3、解决：可以根据浏览器触发的方法来分几种思路

3-1、设置autocomplete属性

可以给form和input设置autocomplete="off"来禁用表单的自动选填，但是在谷歌浏览器设置后点击input，发现对已经记录下来的密码账号无效，还是会弹出来

而设置autocomplete="new-password"后生效，但是只有第一次点击才生效之后就没有效果了，还是会弹出来，适用于登录的页面

3-2、通过设置只读属性readonly，在readonly=true时，浏览器的自动填充会暂时失效，缺点就是连续点击两次还是会弹出来

.vue html

<el-input v-model="addEditForm.initPwd" readonly name="initPwd" @focus="focusPassword($event)" @blur="blurPassword($event)" autocomplete="new-password" type="password" show-password></el-input>

js

        focusPassword(e){
            setTimeout(()=>{
                e.target.removeAttribute('readonly')
            },0)
        },
        blurPassword(e){
            e.target.removeAttribute('readonly')
            setTimeout(()=>{
                e.target.setAttribute('readonly', true)
            },0)
        },