哈哈哈，是不是标题很长呀，不逗你们了。其实这么长的标题主要就说了两件事：

　　第一件：解决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

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

if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){              var inputers = document.getElementsByTagName("input");              for(var i=0;i

　　　　　　4)去除输入框的name和id属性:

if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){              var inputers = document.getElementsByTagName("input");              for(var i=0;i

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

　　　　　　6)修改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代码大致如下：

     
     
      
           
                  
       
  <--------------这里很重要，contenteditable 一个新h5属性，可以把一个div变成可输入的文本框。我们在这里输入好的用户名，在点击失焦或者tab键后，要赋值给下面的input           
         <--------------这里的display：none是一个很重要的简单粗暴的点，它可以防止我们按下第一次tab键的时后聚焦在这个input上而密码框并未聚焦。     
      
     
      
          
                 
          <-------------这里是负责放置密码的。输入的密码会经过js处理后放入到这里，同时这里的宽度逐渐撑开。撑开宽度是为了让下面的“假”光标跟随后移。 　　　　　　
          <------------- 这里是假光标          
             
      
     
      
          
       
               
        
               
        
         拖动滑块验证
        
               
        
          
       
     
      
     
      
       
      
     

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

}）

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