javascript - 尽管有 jquery，Chrome(但不是 Firefox)自动填充与标签文本重叠

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

看完Benjamin Miles tutorial我注意到您可以像这样使用 jquery 检测 chrome 自动填充:

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

注意一定要把代码放在$(window).load(function(){});

而不是

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