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

}）

是的，总体思路是很麻烦，可是它至少能解决碍眼的黄色背景的问题。