标签：浏览器 填充 form readonly 自动 input password

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

标签：浏览器,填充,form,readonly,自动,input,password
来源： https://www.cnblogs.com/lovewhatIlove/p/16190575.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。