'autocomplete="off"'在Chrome 中不起作用

大家都知道autocomplete属性是表单字段中的HTML5新属性，该属性有两种状态值，分别为"on" 和 "off"，该属性可省略：省略属性值后默认值为"on"，也可以省略属性名，直接写入关键字on或off。

网站项目中，有登录和注册的弹框，在除chrome的浏览器中一切都ok，一旦在谷歌浏览器中，问题来了：首先从登录弹框中登陆成功，chrome会弹出是否保存密码的提示框，点击保存密码按钮后，就会出现表单自动填充的问题，如图，如果用户和密码都自动填充，那么在某些网站中将非常的不安全，如支付网站。

aaarticlea/png;base64,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" alt="" />

如何解决呢，一下提供几种方法

1、修改value值（目前已失效，随着chrome版本的升级，现今版本已不再能获取到value值了，所以无法对其进行操作，貌似chrome自动填充的表单的value值是存在 DocumentFragment里的div中的，暂不知道怎么去处理，等待大神告知）

 if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
             var inputers = document.getElementsByTagName("input");
             for(var i=0;i<inputers.length;i++){
                 if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){
                     inputers[i].value = " ";
                 }
             }
             setTimeout(function(){
                 for(var i=0;i<inputers.length;i++){
                     if(inputers[i].type !== "submit"){
                         inputers[i].value = "";
                     }
                 }
             },100)
         } 

2、 修改disabled属性

     if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
                 var inputers = document.getElementsByTagName("input");
                 for(var i=0;i<inputers.length;i++){
                     if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){
                         inputers[i].disabled= true;
                     }
                 }
                 setTimeout(function(){
                     for(var i=0;i<inputers.length;i++){
                         if(inputers[i].type !== "submit"){
                             inputers[i].disabled= false;
                         }
                     }
                 },100)
             }  

3、 去除输入框的name和id属性

     if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
                 var inputers = document.getElementsByTagName("input");
                 for(var i=0;i<inputers.length;i++){
                     if((inputers[i].type !== "submit") && (inputers[i].type !== "password")){
                         var input = inputers[i];
                         var inputName = inputers[i].name;
                         var inputid = inputers[i].id;
                         inputers[i].removeAttribute("name");
                         inputers[i].removeAttribute("id");
                         setTimeout(function(){
                             input.setAttribute("name",inputName);
                             input.setAttribute("id",inputid);
                         },1)
                     }
                 }
             }  

4、可以在不需要默认填写的input框中设置 autocomplete="new-password"

网上咱没有找到对其详细解释，但是发现163邮箱的登录注册是这么用的，

5、修改readonly属性、

<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>