停用 Chrome 自動填充

問題描述

我在幾種表單上遇到了 chrome 自動填充行為的問題。

表單中的欄位都具有非常常見且準確的名稱，如”email”，”name” 或”password”，並且還具有 autocomplete="off"集。

自動完成標誌已成功停用自動完成行為，當您開始輸入時，會顯示值的下拉式清單，但沒有將 Chrome auto-populates 的值更改為。

這個行為是可以的，除了 chrome 正在錯誤地填寫輸入，例如用電子郵件地址填寫電話輸入。客戶已經抱怨了這一點，所以它被證實是發生在多種情況下，而不是某種某種結果，我在本機在我的機器上完成。

我可以想到的唯一現有的解決方案是動態生成自定義輸入名稱，然後提取後端的值，但這似乎是一個非常奇怪的方法圍繞這個問題。有沒有任何標籤或怪癖改變自動填充行為，可以用來解決這個問題？

最佳解決方案

我剛剛發現，如果您有一個網站的 memory 使用者名稱和密碼，當前版本的 Chrome 會在任何 type=password 欄位之前自動填寫您的使用者名稱/電子郵件地址。它不在乎什麼欄位被呼叫 – 只是假定該欄位之前密碼將成為您的使用者名稱。

舊解決方案

只需使用<form autocomplete="off">，它可以根據瀏覽器可能做出的假設 (通常是錯誤的) 阻止密碼預填充以及任何型別的啟發式填充欄位。而不是使用<input autocomplete="off">，這似乎幾乎被密碼自動填充忽略 (在 Chrome 中，Firefox 是服從它) 。

更新解決方案

Chrome 現在忽略<form autocomplete="off"> 。所以我原來的解決方法 (我已經刪除) 現在都是憤怒。

只需建立幾個欄位，並使用”display:none” 隱藏。例：

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

然後把你真正的領域放在下面。

記得新增評論或其他人在你的團隊會想知道你在做什麼！

更新 2016 年 3 月

剛剛用最新的 Chrome 測試 – 都很好。這是一個相當古老的答案，但我想提到，我們的團隊已經使用了這麼多年，現在幾十個專案。儘管下面有幾點意見，它仍然很有效。沒有可訪問性的問題，因為欄位是 display:none，這意味著它們沒有得到關注。正如我所說，你需要把它們放在你的真實領域之前。

如果您使用 JavaScript 修改表單，則需要額外的技巧。在操作表單時再顯示假場，然後在毫秒之後再次隱藏。

使用 jQuery 的示例程式碼 (假設你給你的假欄位一個類)：

        $(".fake-autofill-fields").show();
        // some DOM manipulation/ajax here
        window.setTimeout(function () {
            $(".fake-autofill-fields").hide();
        },1);

次佳解決方案

對於新的 Chrome 版本，您可以將 autocomplete="new-password"放在您的密碼欄位中，就是這樣。我檢查了，工作正常。

在 Chrome 開發人員的討論中提到了這個提示：https://code.google.com/p/chromium/issues/detail?id=370363#c7

附：不要忘記使用不同欄位的唯一名稱來防止自動填充。

第三種解決方案

經過數月和數月的鬥爭，我發現解決方案比你想像的要簡單得多：

代替 autocomplete="off"使用 autocomplete="false"😉

像這樣簡單，它的作用就像 Google Chrome 中的魅力！

第四種方案

有時甚至 autocomplete = off 不會阻止將憑據填入錯誤的欄位。所以它填補了一些欄位，但不是一個使用者或暱稱！

修復：瀏覽器自動填入 readonly-mode 並設定可寫入焦點

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

(焦點=滑鼠點選並選擇欄位)

更新：Mobile Safari 將遊標設定在該欄位中，但不顯示虛擬鍵盤。新修復工作像以前一樣，但處理虛擬鍵盤：

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

現場演示 https://jsfiddle.net/danielsuess/n0scguv6/

//UpdateEnd

說明：瀏覽器自動將憑據填充到錯誤的文字欄位中？

filling the inputs incorrectly, for example filling the phone input with an email address

有時我注意到這個奇怪的行為在 Chrome 和 Safari 上，當密碼欄位是相同的形式。我想，瀏覽器會查詢一個密碼欄位來插入您儲存的憑據。然後將使用者名稱自動填寫到最接近的 textlike-input 欄位中，該欄位出現在 DOM 中的密碼欄位之前 (由於觀察而猜測) 。由於瀏覽器是最後一個例項，您無法控制它，

以上這個 readonly-fix 為我工作。更新：純 JavaScript，不需要 jQuery 。

第五種方案

嘗試這個。我知道這個問題有些古老，但這是一個不同的解決辦法。

我也注意到問題出現在 password 欄位之上。

我嘗試過兩種方法

<form autocomplete="off"> 和<input autocomplete="off">，但沒有一個為我工作。

所以我使用下面的程式碼片段來修復它 – 只是在密碼型別欄位上方新增了另一個文字欄位，並將其設定為 display:none 。

這樣的事情

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

希望會幫助某人。

第六種方案

我不知道為什麼，但這對我來說是有幫助的。

<input type="password" name="pwd" autocomplete="new-password">

我不知道為什麼，但 autocompelete = “new-password” 停用自動填充。它最新的 49.0.2623.112 鍍 chrome 版本。

第七種方案

以下是我提出的解決方案，因為 Google 堅持覆蓋人們似乎所做的每一個 work-around 。

選項 1 – 選擇點選上的所有文字

將輸入的值設定為使用者 (例如 your@email.com) 的示例或欄位的標籤 (例如 Email)，並將一個名為 focus-select 的類新增到您的輸入中：

<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">

這裡是 jQuery：

$(document).on('click', '.focus-select', function(){
  $(this).select();
});

我真的看不到 Chrome 搞錯了價值觀。那會很瘋狂所以希望這是一個安全的解決方案。

選項 2 – 將電子郵件值設定為空格，然後將其刪除

假設您有兩個輸入，如電子郵件和密碼，將電子郵件欄位的值設定為" "(一個空格)，並新增屬性/值 autocomplete="off"，然後用 JavaScript 清除。您可以將密碼值留空。

如果使用者因為某些原因沒有 JavaScript，請確保您修改其輸入 server-side(您可能應該是反正)，以防它們不會刪除空格。

這是 jQuery：

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

我設定一個超時到 15，因為 5 似乎在我的測試中偶爾工作，所以三倍數這個數字似乎是一個安全的賭注。

如果沒有將初始值設定為空格，Chrome 將輸入輸入為黃色，就像它具有 auto-filled 一樣。

選項 3 – 隱藏輸入

把它放在窗體的開始處：

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS：

.hide{ display:none; }

確保您保留 HTML 註釋，以便您的其他開發人員不會刪除它！還要確保隱藏輸入的名稱是相關的。

第八種方案

它是如此簡單和棘手:)

Google Chrome 基本上搜尋<form>，<body> 和<iframe> 標籤中的每個第一個可見密碼元素，以便為其啟用自動重新填充，因此要停用此功能，您需要新增一個虛擬密碼元素，如下所示：

- 如果您的<form> 標籤中的密碼元素需要在<form> 開啟標籤後立即將虛擬元素作為表單中的第一個元素
- 如果您的密碼元素不在<form> 標籤中，則將<body> 開啟標籤後的第一個元素作為第一個元素放在 html 頁面中
您需要隱藏虛擬元素而不使用 css display:none，因此基本上使用以下作為虛擬密碼元素。
```
<input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
```

第九種方案

對我而言，簡單

<form autocomplete="off" role="presentation">

做到了。

測試了多個版本，最後一次嘗試是在 56.0.2924.87

第十種方案

我加了一點不同的觀點。為什麼不 honeypot it to stop Chrome from botting your fields？這似乎對我來說是工作 cross-browser 。值得一試：

Place an input above your other fields you do not want filled. Set the style to display none and the end user will not ever know it’s there. Also no yellow boxes.

<input type="password" style="display:none;">

參考文獻

Disabling Chrome Autofill

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。