檢測時自動填充已經充滿

經過長期鬥爭，我終於找到了清除自動填充樣式在每個瀏覽器的唯一途徑：檢測時自動填充已經充滿

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

檢測時自動填充已經充滿

回答

相關問題