登陆被浏览器记住密码后,密码填充到密码框问题

        通常登录以后浏览器会询问是否记住密码,若是把密码记住在浏览器上,下次登录的时候浏览器会把用户名和密码自动填充到登陆页面。工做中作项目提测后,测试提出360浏览器记住密码后会自用把登录帐号和密码填充到添加帐号页面和修改帐号页面,通过本地测试后发现确实存在该问题。 相似于这样:javascript

    从用户的角度来讲 这么整确定不行,即便是浏览器的问题。经过组内人员的一步一步探索最终找到解决办法:html

       一、经过网上搜索 发现有些文章是提供设置设置文本框的autocomplete属性为off,根据该方法修改后发现并无解决问题,原来该属性的含义表明是否让浏览器自动记录以前输入的值。java

       二、从一篇文章上看到 “大部分浏览器都是根据表单域的type="password"来判断密码域”,也给出了解决办法,“动态改变文本框”浏览器

      因此在页面加载时不让它是密码框,改为文本框,果真密码就匹配不上了。当该密码框获取焦点后改变他的type属性  this.type="password",这种写法能够实现功能。但使用IE浏览器测试时发如今IE8及一下的浏览器中this.type会报错。该方法仍是不能完全解决这个问题。ide

      三、在文本框外面嵌套标签测试

 <label id="password2"><input class="txt w-200" value="" type="text" id="SecondPwd" /></label>

     能够在文本框获取焦点以后直接改变label标签的html

    $("#SecondPwd").live('focus', function () {
       if ($(this).attr('type') == 'text') {

      /*改变label标签的html*/
       $('#password2').html('<input class="txt w-200" value="" type="password" id="SecondPwd" />');

      /*标签获取焦点*/
       $('#SecondPwd').focus();
   }
  })

  这种写法在IE8及如下浏览器下面均可以实现效果,但通过后期测试又发如今360急速模式下面仍然可以填充上用户名和密码,还得找其余的解决办法this

    四、在使用第五种方法的以前,考虑把全部的框都先设为只读,而后在获取焦点后设置成可写,失去焦点后在只读,但密码框设置为可写以后仍会匹配上。htm

    五、加载一个显示的文本框和隐藏的密码框blog

   <label id="password1">
    <input class="txt w-200 fl" value="" type="text" name="txtPwd" id="txtPwd" />
    <input class="txt w-200 fl" value="" type="password" name="Pwd" id="Pwd" style="display: none" readonly="true" />//为了防止隐藏的文本框被匹配上  先设置为只读

     </label>

    当文本框再获取焦点以后

     $("[name=txtPwd]").live('focus', function () {
     /*当前文本框隐藏*/
     $(this).hide();

     /*隐藏的密码框显示而且获取焦点 只读属性去掉*/
      $('#pwd1').show().attr('readonly', false).focus();
})

    几年前在公司写的文章了。今天整理一下。如若遇到这类问题能够参考第五种方法解决。小伙伴如有更好的办法能够评论分享ip

相关文章
相关标签/搜索