admin管理员组文章数量:1536769
浏览器[包含360浏览器]输入框自动填充问题
之前做的一个项目,登录界面输入框都是透明的,效果挺好,奈何360浏览器访问时总是自动填充,因时间紧急,一直未能解决,今天偶然又翻了出来,百度良久,屡试皆爽
【无效】方法总结起来主要有以下
1. ReadOnly法
HTML设置Readonly,JS延时移除属性
无果,移除后输入框获取焦点依然会自动填充
2. 标靶法
HTML设置两个标靶输入框,display设置为none,或者JS延时隐藏
无果,只要标靶不显示就会自动填充
3. 杂合法
ReadOnly和标靶一起使用,上述两条结合的产物
依然无果,只要标靶不显示就会自动填充
【有效】结合以上理论,加上自己琢磨尝试了一上午,试出了以下方法
步骤如下
1. HTML设置标靶输入框,name随意,width和height都设置为0
<input id="username" type="text" style="width: 0px;height: 0px;">
<input id="password" type="password" style="width: 0px;height: 0px;">
2. HTML设置真实输入框ReadOnly
<input id="userNameInput" type="text" readonly="readonly" placeholder="请输入登录帐号"/>
<input id="passWordInput" type="password" readonly="readonly" placeholder="请输入登录密码"/>
3. JS延时移除真实输入框属性
$(function(){
setTimeout(function(){
$('#userNameInput').removeAttr("readonly");
$('#passWordInput').removeAttr("readonly");
},200);
})
【总结】方法探索的过程以及一些不确切的认知
-
标靶输入框跟真实输入框同时存在时,会优先选择真实输入框,猜测跟ID有关,但是换了ID之后照旧
-
标靶输入框跟真实输入框同时存在时,真实输入框设置只读之后,标靶输入框会被填充
-
上述第二条情况下,隐藏标靶狂或者直接设置display:none,真实输入框获取焦点之后,马上又会被填充,但可以设置宽高为0代替隐藏
-
如果ReadOnly的属性remove不是延期执行或者过早,猜测标靶还没被填充真实输入框的Readonly就被remove了,出现了第一条中的情形
【Mark】下一步研究下自动填充原理
版权声明:本文标题:浏览器[包含360浏览器]输入框自动填充问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1726940103a1091059.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论