检测自动填充何时填充答案

【问题标题】：Detecting when the autofill has been filled检测自动填充何时填充
【发布时间】：2012-04-02 21:11:01
【问题描述】：

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

$('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

【问题讨论】：

只是好奇，为什么要清除自动填充的表单字段？
@j08691：我不想清除自动填充的字段（这不是这样做的），我想清除在 CSS 中也无法更改的难看的黄色背景。
@NicolaPeluchetti：见编辑。不，它不是插件。
自动填充时是否触发了“onChange”功能？
@gdoron：我不想禁用自动完成功能。我想禁用它的样式。

标签： javascript jquery autofill

【解决方案1】：

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

检测代码示例：

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

【讨论】：

我知道那个选择器。但是，我的代码中既不想要任何 setInterval 也不想要 setTimeout。
这是迄今为止我所见过的解决 Chrome 和自动填充输入问题的最佳解决方案。 input:-webkit-autofill 比 polling 和 setTimeout() 等要好得多。非常感谢您为这个长期存在的问题提供了答案！
@ChrisN，这个答案使用setInterval。

【解决方案2】：

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

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

目前，尽管该错误仍然存在，并且您的骇人听闻的解决方案似乎是 Chrome 的唯一解决方案，但是 a) Chrome 的解决方案不需要 setTimeout 和 b) 似乎 Firefox 可能尊重!important 标志或某种具有高优先级的CSS 选择器，如Override browser form-filling and input highlighting with HTML/CSS 中所述。这有帮助吗？

【讨论】：

不幸的是，它确实需要setTimeout，Firefox 也有同样的问题。相信我，当我们说话时，我会继续尝试它们的变体:)
我在最后添加的线程也有一个解决方案，已被注意到有效，即使用 input:focus 选择器并使用 onload javascript 依次聚焦每个表单元素。跨度>
我确实看到了，但奇怪的是，它似乎对我不起作用。我正在使用 Chrome Canary，所以也许那个 “错误”已修复 :)

【解决方案3】：

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

<form autocomplete="off">

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

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

【讨论】：

请阅读 cmets。我们已经确定我不想关闭自动完成功能。至于将background-color 设置为white，是行不通的。这正是我需要解决方法的原因。
刚刚阅读，对不起@minitech 对不起，我真的认为你需要超时，因为表单会在一段时间后由浏览器本身填充，而不是 DOM

【解决方案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 解决方案将可用，否则您必须根据需要重新初始化设置变量。

例如你这样做： var foo = $('#foo');

那么你必须调用：foo=$('#foo');

因为原始元素已被移除，而现在在其位置上存在一个克隆。

【讨论】：

不过，这绝对不是我的首选解决方案，因为 a) 它使用浏览器嗅探，这是错误的，因为 Firefox 有相同的错误，b) 它仍然无法工作，因为没有超时。
什么版本的 Firefox 有这个 bug？所以我可以相应地编辑我的评论，因为我当前的版本没有表现出这种行为。如果您不喜欢浏览嗅探，只需运行 if 语句来查看该元素是否存在。您需要进行某种检查的主要原因是因为原始副本不再存在，因此可能需要重新初始化某些变量。此外，如果您需要超时，很容易插入，但我的工作完美无缺，没有人在场，这就是为什么我在回复中省略了它。