Chrome(但不是Firefox)自动填充是重叠标签文本,尽管jquery

Question

我已经创建了一个登录表单,其中包含"用户名"和"密码"的标签,下面的jquery用于在用户关注字段后隐藏标签.

$(document).ready(function(){

 $("form.login input")
  .bind("focus.labelFx", function(){
   $(this).prev().hide();
  })
  .bind("blur.labelFx", function(){
   $(this).prev()[!this.value ? "show" : "hide"]();
  })
  .trigger("blur.labelFx");

});

和HTML:

<form method="post" id="login-form" action="/accounts/login/">
    <div class="input-wrapper">
        <label for="id_username">Username</label>
        <input id="id_username" size="30" type="text" name="username">
    </div>
</form>

问题是chrome的自动完成似乎是在加载用户名和密码之前,这个脚本可以捕获它,给我奇怪的重叠文本,直到我手动关注它.这不是 Firefox的问题.图片来自:http://imgur.com/kJRLa

有关如何解决这个问题的建议,以便自动填充数据导致标签隐藏？

Answer 1

Chrome(以及相当于Google工具栏在其他浏览器上的自动填充功能)是一个糟糕的网络公民,其表单填写行为.当它填写表单字段时,它不会触发正常事件.如果您不想禁用自动填充,可以设置定时事件,定期检查自动填充是否已发生.

的第一个答案(由问题提问者)该SO问题是一个例子溶液.

Answer 2

阅读Benjamin Miles教程后,我注意到你可以用jquery检测chromes autofill,如下所示:

$(window).load(function(){
   if($('input:-webkit-autofill')){
      //Remove Label Function
   }        
});

请注意,您必须将代码放入 $(window).load(function(){});

并不是

$(document).ready(function(){})