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工具栏在其他浏览器上的自动填充功能）是一种糟糕的网络公民，其表单填写行为。当它填写表单字段时，它不会触发正常事件。如果您不想禁用自动填充，可以设置定时事件，定期检查自动填充是否已发生。

this SO question的第一个答案（问题提问者）是一个示例解决方案。

Answer 2

阅读Benjamin Miles tutorial后，我注意到您可以使用jquery检测Chrome自动填充，如下所示：

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

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

中

而不是

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

Answer 3

您可以尝试从这样的控制器注入占位符属性

setTimeout(function() {
function compile(element) {
    var el = angular.element(element);
    $scope = el.scope();
    $injector = el.injector();
    $injector.invoke(function($compile) {
        $compile(el)($scope)
    })
}
var elem = document.querySelectorAll(':-webkit-autofill');
for (i = 0; i < elem.length; ++i) {
    elem[i].setAttribute("placeholder", "");
    compile(elem);
}}, 500);

Answer 4

您还可以使用以下

var wait = window.setTimeout( function(){
//Pseduo code
label.style.display = "none";
},5);

5毫秒后执行代码并隐藏标签。

Answer 5

input:-webkit-autofill为-webkit-autofill属性添加必需的样式，以解决重叠的问题。

Chrome（但不是Firefox）自动填充是重叠标签文本，尽管jquery

5 个答案: