浏览器自动填充用户名或密码

chrome为了更便捷的用户体验会根据用户保存的用户名或密码进行自动填充,但是有时我们不想使用这功能,想利用autocomplete="off" 关闭此功能,发现关闭不了
例如我需要重新注册一个账号,结果直接将我原先的账号默认填写进表单中了,这样的用户体验很差

最后发现浏览器自动填充是有规律的,比如 input type="text" 后面如果有 input type="password" 一般就会出现自动填充的问题
网上找了一些方法,有先使用disabled然后再使用定时器移除disabled,发现没什么效果,先将 type 设置成 text 再动态改变成 password 这种方法也是有问题的

我自己使用的方法是将浏览器默认的规则打乱,让其自动填充依旧存在,不过自动填充的input使用绝对定位定到屏幕以外,注意是使用定位的方法,不是使用隐藏的方法,使用 display:none 也是没有效果的

<div class="form-control-row">
  <label><em>用户名</em></label>
  <div class="ui-input width-300">
    <input data-dict="numberLetter" 
      maxlength="14" class="text-hints" id="username"
      name="username" type="text" placeholder="">
    <input type="text" tabindex="-1" class="outside_input"> <!--打乱浏览器默认规则的元素-->
    <input type="password" tabindex="-1" class="outside_input"> <!--打乱浏览器默认规则的元素-->
  </div>
</div>

上面两个input只是起到扰乱作用,添加这两个元素后你会发现浏览器自动填充将内容填充到这里,而这input没有name无法进行正常的表单提交,我们再隐藏这两个元素就好了, 注意使用 tabindex=-1 这样使用tab键就可以不对此获取焦点

<div class="ui-input width-300">
  <input type="text" tabindex="-1" class="outside_input">
  <input autocomplete="off" data-dict="!zh" maxlength="16" 
    class="text-hints" id="password" name="password" type="password" placeholder="">
</div>

类似的填写密码自动填充用户名也可以使用类似的原理

个人感觉这种方法不是最好的方法,如果大家有其他好办法欢迎留言^_^