哈哈哈，是不是标题很长呀，不逗你们了。其实这么长的标题主要就说了两件事：
第一件：解决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);
});
}）
是的，整体思路是很麻烦，但是它至少能解决碍眼的黄色背景的问题。