Chrome浏览器（但不是Firefox）的自动填充功能是尽管jquery重叠标签文本 [英] Chrome (but not Firefox) autofill is overlapping label text despite jquery

问题描述

我制作了一个登录表单，其中包含'用户名'和'密码'的标签，下面的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 =postid =login-formaction =/ accounts / login /> 
< div class =input-wrapper> 
< label for =id_username>用户名< / label> 
< input id =id_usernamesize =30type =textname =username> 
< / div> 
< / form> 
  

问题在于chrome的自动完成似乎正在加载用户名和密码，给我奇怪的重叠文字，直到我手动专注于它。这是不是与Firefox的问题。图： http://imgur.com/kJRLa

关于如何修复此问题，以便自动填充的数据导致标签隐藏？

解决方案

Chrome（和Google工具栏在其他浏览器上的自动填充）是一个网络的坏公民，它的表格填充行为。当它填写表单域时，它不会触发正常事件。如果您不希望禁用自动填充，则可以设置一个定时事件，定期检查是否发生自动填充。

第一个答案（由问题提出者）的这个SO问题就是一个例子解决方案。

I've made a login form which contains the labels for 'username' and 'password', with the below jquery used to hide the labels once the user focuses on the field.

$(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");

});

and the 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>

The problem is that chrome's autocomplete appears to be loading the username and password before this scrip can catch it, giving me strangely overlapping text until I manually focus on it. This is not a problem with Firefox. Pic: http://imgur.com/kJRLa

Any suggestions on how to fix this so that autofilled data causes the labels to hide?

解决方案

Chrome (and, equivalently, Google Toolbar's Autofill on other browsers) is a bad citizen of the web with its form filling behavior. When it fills in form fields, it does not fire the normal events. If you don't wish to disable autofill, you can set up a timed event which periodically checks to see if autofill has occurred.

The first answer (by the question asker) of this SO question is one example solution.

这篇关于Chrome浏览器（但不是Firefox）的自动填充功能是尽管jquery重叠标签文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！