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

}）

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

 

转载于:https://www.cnblogs.com/beyrl-blog/p/8651913.html