Question

经过长时间的努力，我终于找到了在每个浏览器中清除自动填充样式的唯一方法：

$('input').each(function() {
    var $this = $(this);

    $this.after($this.clone()).remove();
});

问题是，它无法在load中运行，因为字段的自动填充发生在事实之后的某个时间。现在我在load之后的100毫秒超时运行它：

// Kill autofill styles
$(window).on({
    load: function() {
        setTimeout(function() {
            $('.text').each(function() {
                var $this = $(this);

                $this.after($this.clone()).remove();
            });
        }, 100);
    }
});

即使是最慢的系统，这似乎也很安全，但它确实不优雅。是否有某种可靠的事件或检查我可以查看自动填充是否完整？

编辑：这是自动填充。

autofill http://dl.dropbox.com/u/2463964/autofill.png

Answer 1

如果您使用的是Chrome或Safari，则可以使用input:-webkit-autofill CSS选择器来获取自动填充的字段。

检测代码示例：

setInterval(function() {
    var autofilled = document.querySelectorAll('input:-webkit-autofill');
    // do something with the elements...
}, 500);

Answer 2

在http://code.google.com/p/chromium/issues/detail?id=46543#c22处有一个与此相关的错误，看起来最终可能（应该）只能使用!important选择器覆盖默认样式，这将是最多的优雅的解决方代码类似于：

input {
    background-color: #FFF !important;
}

目前虽然该漏洞仍处于打开状态，但似乎您的hackish解决方案是Chrome的唯一解决方案，但是a）Chrome的解决方案不需要setTimeout和b）它似乎是Firefox 可能尊重!important标志或某种具有高优先级的CSS选择器，如Override browser form-filling and input highlighting with HTML/CSS中所述。这有帮助吗？

Answer 3

我建议你首先避免自动填充，而不是试图欺骗浏览器

<form autocomplete="off">

更多信息：http://www.whatwg.org/specs/web-forms/current-work/#the-autocomplete

如果你想保持自动填充行为但改变样式，也许你可以做这样的事情（jQuery）：

$(document).ready(function() { 
  $("input[type='text']").css('background-color', 'white');
});

Answer 4

$(window).load(function()
{
    if ($('input:-webkit-autofill'))
    {
        $('input:-webkit-autofill').each(function()
        {
            $(this).replaceWith($(this).clone(true,true));
        });
        // RE-INITIALIZE VARIABLES HERE IF YOU SET JQUERY OBJECT'S TO VAR FOR FASTER PROCESSING
    }
});

我注意到您发布的jQuery解决方案不会复制附加事件。我发布的方法适用于jQuery 1.5+，应该是首选解决方案，因为它保留了每个对象的附加事件。如果你有一个循环遍历所有初始化变量并重新初始化它们的解决方案，那么可以使用完整的100％工作jQuery解决方案，否则你必须根据需要重新初始化set变量。

例如，你这样做：var foo = $（'＃foo'）;

然后你必须打电话：foo = $（'＃foo'）;

因为原始元素已被删除，并且克隆现在已存在。

检测自动填充何时填满

4 个答案: