检测时自动填充已经充满

经过长期斗争，我终于找到了清除自动填充样式在每个浏览器的唯一途径：检测时自动填充已经充满

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

来源

2012-03-17 Ryan

只是好奇，为什么你想清除自动填充表单域？ – j08691 2012-03-17 17:49:13

@ j08691：我不想清除自动填充的字段（这不是这样做的），我想清除在CSS中也不可更改的丑陋黄色背景。 – Ryan 2012-03-17 17:51:17

什么是“自动填充”？ – 2012-03-17 17:52:11

有一个错误在http://code.google.com/p/chromium/issues/detail?id=46543#c22打开了与此，它看起来像它可能（应该）最终可能只写在默认样式与!important选择，这将是最优雅的解决方案。该代码会是这样的：

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

不过现在的错误仍然是开放的，它看起来像你的hackish的解决方案是针对Chrome唯一的解决办法，但一）Chrome浏览器解决方案不需要setTimeout和b ）看起来好像火狐可能尊重!important标志或某种具有高优先级的CSS选择器，如Override browser form-filling and input highlighting with HTML/CSS中所述。这有帮助吗？

来源

2012-03-17 19:11:22 conartist6

不幸的是，它确实需要'setTimeout'，并且Firefox也有同样的问题。相信我，我会继续尝试它们的变体，因为我们说:) – Ryan 2012-03-17 19:13:49

我在最后讨论的线程也有一个解决方案，已被注意到工作，这是使用输入：焦点选择器和使用onload JavaScript来依次聚焦每个表单元素。 – conartist6 2012-03-18 16:15:58

我确实看到了这一点，但奇怪的是，它似乎不适合我。我使用的是Chrome Canary，所以* * bug可能已修复:) – Ryan 2012-03-18 16:54:29

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

例检测代码：

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

来源

2012-03-17 18:06:35 Tyilo

我知道那个选择器。但是，我不想在我的代码中使用'setInterval'和'setTimeout'。 – Ryan 2012-03-17 18:11:21

这是BY FAR是我见过的Chrome和自动填充输入问题的最佳解决方案。输入：-webkit-autofill比轮询和setTimeout（）等方式更好。非常感谢您为这个长期存在的问题提供解答！ – ChrisN 2015-06-04 21:17:05

@ChrisN，这个答案使用'setInterval'。 – Ryan 2015-07-07 16:47:13

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

<form autocomplete="off">

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

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

来源

2012-04-02 15:34:25

请阅读评论。我们已经确定我*不想关闭自动填充*。至于设置'background-color'为'white'，它不起作用。这正是我需要解决方法的原因。 – Ryan 2012-04-02 18:30:42

刚刚阅读，对不起@minitech对不起，我真的觉得你会需要超时，因为形式被浏览器本身填充一点后，而不是DOM – 2012-04-03 09:40:31

-1

$(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'）; var foo = $（'＃foo'）; var foo = $（'＃foo'）;

那么你将不得不打电话：foo = $（'＃foo'）;

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

来源

2013-02-15 12:52:15

这绝对不是我的首选解决方案，因为a）它使用浏览器嗅探，这是错误的，因为Firefox具有相同的错误，并且b）它仍然不起作用，因为没有超时。 – Ryan 2013-02-15 14:54:36

什么版本的Firefox有bug？所以我可以相应地编辑我的评论，因为我目前的版本没有表现出这种行为。如果你不喜欢浏览嗅探，只需运行if语句来查看该元素是否存在。您需要进行某种检查的主要原因是因为某些变量可能需要重新初始化，因为原始副本不再存在。此外，如果您需要超时，则很容易插入，但我的工作完美无缺，因此我将其从我的回应中排除。 – 2013-02-16 14:35:44

检测时自动填充已经充满

回答

相关问题