解決Chrome瀏覽器自動記錄用戶名和密碼的黃色背景問題和該解決方法與tab切換至下一個input沖突的問題。

哈哈哈，是不是標題很長呀，不逗你們了。其實這么長的標題主要就說了兩件事：

　　第一件：解決Chrome瀏覽器自動記錄用戶名和密碼的黃色背景問題。

　　第二件：輸入完用戶名后按下tab鍵切換至下一個輸入密碼input。這個效果和第一件的解決方案有些沖突。這里也用一種簡單粗暴的方式解決了。

　　那我們接下來先解決第一件事：Chrome瀏覽器自動記錄用戶名和密碼的黃色背景問題。

　　這個問題我上網查了很多解決方法，大致就是以下幾點，那如果就是總結，這篇文章也沒有寫的必要，問題就在於我試了下文所有的方法，都不好使，所以，我自己想出了解決辦法，簡單粗暴，請大家耐心看下去：

　　　　1.如果想去掉黃色背景，但是保留自動記錄用戶名和密碼的，使用box-shadow,利用陰影可以解決。但是一旦input背景為圖片或是透明，那么，這個辦法解決不了這個問題。

　　　　2.那既然這樣，就不要記住密碼和用戶名了，於是網上又有如下的集中解決方案：

　　　　　　1).通常會在form表單上加入autocomplete="off" 或者 在輸入框中加入autocomplete="off"。

　　　　　　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)去除輸入框的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)  
                }  
            }  
        } 

　　　　　　5)可以在不需要默認填寫的input框中設置 autocomplete="new-password"

　　　　　　6)修改readonly屬性

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

　　　　　　很遺憾的是，上述所有的方法我都試過，真的真的，一個都不好用。。。不知道是我的問題還是怎樣，但是那個黃色的背景就是那樣礙眼的留在那里，，，但是規划的要求還要完成，怎么辦：

　　　　　　先說一下規划的要求吧，不要有黃色背景，記住密碼，輸完用戶名，按tab鍵讓密碼輸入框自動聚焦。下面說一下思路：

　　　　　　很多網站都會做一個所謂的“假的”輸入框放在頁面上，但是真的輸入框還保留，只是隱藏或者透明度為零等。這個方法就是基於這樣一個思維，做了一個假的文本框和一個假的密碼框。

　　　　　　假的文本框是把一個div變成可輸入的文本框。我們在這里輸入好的用戶名，在點擊失焦或者tab鍵后，要賦值給下面真正用於的input[type="text"].

　　　　　　但是，密碼就不能這么做，因為密碼是需要加密的，呈圓點或者星號出現在框里。所以我們需要一個input去放輸入好的數字密碼，和一個span或者whatever,去放置一個經過轉換成為*或者圓點的密碼。因為最后我們要提交input[type="password"]的密碼，所以 我們需要這個input[type="password"]，以position:absolute放置在框里，和負責放置轉換成星號的密碼重疊在一起。並且這個input[type="password"]要放置在最上面，然后設置一個opacity是零，是的，確實是輸入什么都看不見了，但是要的就是這個效果，我們只需要它記住輸得密碼。真正給使用者們看的則是那個經過轉換后的假input。那下面的代碼為什么又會有一個假光標呢？那是因為這個input[type="password"]的opacity都為0了，那自然光標也看不到。所以用keyframes，動畫仿了一個光標。　

HTML代碼大致如下：

<form id="loginForm">
     <div class="input_outer">
           <span class="u_user"></span>
           <div class="user-box" contenteditable placeholder="請輸入用戶名"></div>  <--------------這里很重要，contenteditable 一個新h5屬性，可以把一個div變成可輸入的文本框。我們在這里輸入好的用戶名，在點擊失焦或者tab鍵后，要賦值給下面的input
           <input type="text" name="username" id="username" class="name1" style="display:none;">  <--------------這里的display：none是一個很重要的簡單粗暴的點，它可以防止我們按下第一次tab鍵的時后聚焦在這個input上而密碼框並未聚焦。
     </div>
     <div class="input_outer" style="position: relative;">
          <span class="us_uer"></span>
          <span class="pass-box" placeholder="${placeholderPassword}"></span>   <-------------這里是負責放置密碼的。輸入的密碼會經過js處理后放入到這里，同時這里的寬度逐漸撐開。撐開寬度是為了讓下面的“假”光標跟隨后移。
　　　　　　<span class="blink"></span>   <------------- 這里是假光標
          <input type="password" name="password" id="password" class="name2" style="z-index: 100"> 
     </div>
     <div class="wrap">
          <div id="slider">
               <div class="drag_bg"></div>
               <div class="drag_text" onselectstart="return false;" unselectable="on">拖動滑塊驗證</div>
               <div class="handler handler_bg"></div>
          </div>
     </div>
     <div class="login_btn"><input type="button" id="login_button" value="登錄" onkeydown="LoginSubmit()"/></div>
</form>

　　　　　　js如下：

$(function() {
　　$(".user-box").bind({
       blur :function(){
          $("#username").val($(".user-box").text());
       },
       keydown :function(event){
          if (event.keyCode == 13) {
              event.preventDefault();
          }
       }
    });

　　$('.user-box').bind('keyup',function(){
 if (event.keyCode == 9) {
 $("#password").focus();
 $('.pass-box').prop('placeholder','');
 $('.blink').addClass('animation');
 }else{
 var _html = this.innerHTML;
 if(_html.length > 20){
 this.innerHTML = _html.substr(0,20);
 this.blur();
 }
 }
 });
 $("#password").bind('blur', function(event) {
 $('.blink').removeClass('animation');
 });
 $("#password").bind('focus', function(event) {
 $('.pass-box').attr('placeholder','');
 $('.blink').addClass('animation');
 });
 $("#password").bind('keyup', function(event) {
 //讓密碼以*一個一個顯示
 var len = $(this).val().length ;
 var html = "";
 for(var i = 0; i< len;i++){
 html += "*";
 }
 $('.pass-box').html(html);
 });

}）

是的，整體思路是很麻煩，但是它至少能解決礙眼的黃色背景的問題。