禁用 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。