消除浏览器对input输⼊框的⾃动填充
Mozilla官⽅⽂档建议的是直接使⽤ autocomplete = ‘off’ 即可禁⽌输⼊框从浏览器cache获取数据,博主以前使⽤这个也就⾜够兼容浏览器了。
现在发现,却在chrome、firfox上有兼容性⽆法解决。
后来查阅相关资料得到以下解决⽅法:
1:可以设置⼀个默认的input⽤来接收浏览器的默认填充,并且设置css为dispaly:none
形如:
<input type = 'text' style='display:none'>
这样既不会影响⽤户的体验,也可以兼容所有的浏览器,但经过测试却发现,在chrome上不起作⽤,在firefox上也只能对type != password的输⼊框起作⽤。
2:autocomplete = 'new-password'
<input type='text' >
input框禁止输入<input type='password' autocomplete='new-password' >
使⽤上诉代码,在chrome上既可⽣效,⽤户名与密码都不会⾃动填充,但是firefox上任然会⾃动填充⽤户名
3:结合上诉两个情况
<input type='text' style='display:none'> <!-- 针对firefox -->
⽤户名:<input type='text' autocomplete='off'>
密码:<input type='password' autocomplete='new-password'>
既可解决针对chrome与firefox内核的浏览器⾃动填充输⼊框的问题
4:但是近期经过测试发现这种⽅法还是不能解决firefox上密码框的历史输⼊,可以:3步骤上做这样的操作:
<input type='password' autocomplete="new-password" readonly onfocus="veAttribute('readonly');" onblur="this.setAttribute('readonly',true);"
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论