版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。版权
浏览器[包含360浏览器]输入框自动填充问题
之前做的一个项目,登录界面输入框都是透明的,效果挺好,奈何360浏览器访问时总是自动填充,因时间紧急,一直未能解决,今天偶然又翻了出来,百度良久,屡试皆爽
【无效】方法总结起来主要有以下
1. ReadOnly法
HTML设置Readonly,JS延时移除属性
无果,移除后输入框获取焦点依然会自动填充
2. 标靶法
HTML设置两个标靶输入框,display设置为none,或者JS延时隐藏
无果,只要标靶不显示就会自动填充
3. 杂合法
ReadOnly和标靶一起使用,上述两条结合的产物
依然无果,只要标靶不显示就会自动填充
【有效】结合以上理论,加上自己琢磨尝试了一上午,试出了以下方法
步骤如下
1. HTML设置标靶输入框,name随意,width和height都设置为0
2. HTML设置真实输入框ReadOnly
3. JS延时移除真实输入框属性
$(function(){	setTimeout(function(){	$('#userNameInput').removeAttr("readonly");	$('#passWordInput').removeAttr("readonly");	},200); })
【总结】方法探索的过程以及一些不确切的认知
标靶输入框跟真实输入框同时存在时,会优先选择真实输入框,猜测跟ID有关,但是换了ID之后照旧
标靶输入框跟真实输入框同时存在时,真实输入框设置只读之后,标靶输入框会被填充
上述第二条情况下,隐藏标靶狂或者直接设置display:none,真实输入框获取焦点之后,马上又会被填充,但可以设置宽高为0代替隐藏
如果ReadOnly的属性remove不是延期执行或者过早,猜测标靶还没被填充真实输入框的Readonly就被remove了,出现了第一条中的情形
【Mark】下一步研究下自动填充原理