解决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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值