浏览器[包含360浏览器]输入框自动填充问题

浏览器[包含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);
})

【总结】方法探索的过程以及一些不确切的认知

1. 标靶输入框跟真实输入框同时存在时，会优先选择真实输入框，猜测跟ID有关，但是换了ID之后照旧

2. 标靶输入框跟真实输入框同时存在时，真实输入框设置只读之后，标靶输入框会被填充

3. 上述第二条情况下，隐藏标靶狂或者直接设置display:none，真实输入框获取焦点之后，马上又会被填充，但可以设置宽高为0代替隐藏

4. 如果ReadOnly的属性remove不是延期执行或者过早，猜测标靶还没被填充真实输入框的Readonly就被remove了，出现了第一条中的情形

【Mark】下一步研究下自动填充原理