浏览器保存密码后自动填充问题

问题描述

在浏览器中进行登录操作时浏览器往往会问我们是否需要记住密码，当我们点击了记住密码后，发现浏览器会自动填充此域名下已经保存的账号密码，给用户带来不便。加了HTML5 中的新属性autocomplete="off" ，但是并没有产生效果。

浏览器自动填充机制

反复测试后发现浏览器自动填充机制是满足：页面里有一个type=password的input且这个input前面有一个type=text的input的时候就会进行自动填充。firefox和360浏览器的处理方式是：只要检测到页面里有满足填充机制的，不管是不是display：none 的，只要检测到就直接往里填充。而且是有几个符合条件的就填充几个。而chrome 54版本略有不同：满足上面的条件且页面里只有一个type=password 的input。才会自动给第一个type=text 的input填充账号，给type=password 的input填充密码。

解决方案

所以根据这个机制，我的解决办法是：给第一个type=text的input前面再加一个隐藏的type=text的input，给第一个type=password的input前面再加一个隐藏的type=password的input。

  

    

      
提现地址
      

        

          
          
        
        
      
    
    

      
备注
      

        
      
    
    

      
交易密码
      

        

          
          
        
        
      
    
    

      

        

          确定提交
        
      
    
  

到目前为止(2018-09)这个方法在chrome、firefox、ie、360、ios、安卓等各设备各浏览器中都有生效！

2019.02.20修改

最近项目中发现在Chrome(72.0.3626.109)版本中只使用一个hidden-input不生效了，尝试在加一个hidden-input就可以了，如：