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

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

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

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

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

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

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

如果觉得《浏览器[包含360浏览器]输入框自动填充问题》对你有帮助，请点赞、收藏，并留下你的观点哦！