Safari瀏覽器：自定義自動完成，系統自動填充接觸的衝突

我們有一個包含一個文本<input>這是我們重視的自定義自動完成組件（使用AngularStrap的事先鍵入的內容要準確）的網頁。Safari瀏覽器：自定義自動完成，系統自動填充接觸的衝突

Safari顯然認爲，輸入包含一個人的姓名，因此提供了一個自動填充菜單，其中包含系統地址簿中填充的值（屏幕截圖頂部的小菜單;還注意到由Safari添加的相應圖標，綠色）。

這導致以下問題：

場名爲「名稱」，但它是不意思包含人名。所以提供個人建議是沒有意義的。
Safari的內置菜單掩蓋了我們的自定義建議菜單，如下圖所示： Safari的建議。

我嘗試以下襬脫Safari的建議：

變化從「名」的name和id屬性類似「標題」或「GoToHellSafari」。沒有幫助。
添加autocomplete="off"，加autocomplete="false"。沒有幫助。
將<label>內的實際文本更改爲除「名稱」之外的內容，例如「標題」。 這個工程，自動填充不見了。
剪切通過去除id和name屬性<input>及其<label>之間的id基連接。沒有幫助。

雖然選項（3）看起來很有希望，但我有以下明顯的問題：我想要該標籤讀取「Name」。有什麼建議麼？

來源

2016-10-17 qqilihq

該用戶有一個很好的解決方案，讓您完全隱藏自動填充按鈕：在輸入字段 https://stackoverflow.com/a/39885072/20526

來源

2016-10-27 13:33:27 Anton

謝謝，這似乎是一個好的開始。但是，它只隱藏**圖標**，但**不顯示自動填充菜單，這會遮擋我的自定義菜單。 – qqilihq

我明白了。那麼，如果我們可以隱藏圖標，那麼我們也可以找到菜單並隱藏它。我很確定如何找到它。 – Anton

隱藏自動填充Safari瀏覽器的圖標：

::-webkit-contacts-auto-fill-button, ::-webkit-credentials-auto-fill-button { 
    visibility: hidden; 
    pointer-events: none; 
    position: absolute; 
    right: 0; 
}

來源

2017-02-28 18:21:53 Vadizar

請參閱現有答案。這只是隱藏圖標，而不是菜單。 – qqilihq

我知道這是幾個月前。我今天只是有同樣的問題。但對我來說，這是一個簡單的文本字段，強制字段。問題不在於所有的強制性領域，只是一些。花了幾個小時瘋了，看着我的代碼中的所有行...

奇怪的是我的同事，相同的操作系統，相同版本的Safari等..沒有同樣的問題。

最後，我發現這是由於我幾天前安裝的擴展。所以，也許你應該看看你已經安裝的擴展，其中一個可能是原因。

希望這會有幫助

來源

2017-06-27 14:48:26 Pat070

Safari瀏覽器：自定義自動完成，系統自動填充接觸的衝突

回答

相關問題