解決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);
 });

}）

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