解決chrome的input莫名其妙被填充問題

曾經有個問題，困惑了好久好久....

問題以下，當我點擊role下拉框時，竟然給我彈出了 用戶名的自動填充

這他媽真噁心，我點的僅僅是個 select，並不是用戶名區域

而後網上找了不少方法，不外乎什麼修改 autocomplete爲off，什麼display:none，而後再顯示等等等，其中大量的帖子都是複製，粘貼別人的東西。沒有一句本身的東西。

後來我發現，當我給一個input="text"設置 placeholder爲郵箱、email，e-mail這三個關鍵字時，點擊input，也會出現自動填充

若是裏面沒有包含這三個關鍵字，則不會出現自動填充

事實上，這個特性是瀏覽器的，它是經過判斷placeholder中的關鍵字去找的。可是找的不是咱們網頁中的用戶名和密碼。而是瀏覽器的地址和其餘信息中的郵箱

若是沒有添加地址和郵箱，那麼即便設置 placeholder爲"email"也不會出現填充

除非新增個地址

來了

那麼和咱們平時看到的用戶名密碼的填充和郵箱填充有什麼區別呢？

用戶名密碼的填充是在「密碼區域」

而且在當前「ip和端口」下已經有以前保存過的用戶名和密碼，纔會出現自動填充，

瀏覽器找密碼區域很容易，只須要知道哪一個input的type是password便可，那麼它怎麼知道誰是用戶名呢？

原來瀏覽默認會去找 離type=「password」最近的上方的那個域爲「用戶名」,進行填充，即便那個不是一個input，而是個select，只要一獲取焦點，就出現 "用戶名填充區域"。

那麼問題來了，我不想讓點擊select被填充(由於這真的很噁心)，該怎麼作呢？

在我看來，有幾下幾個方法:
一、調整順序，把真正的用戶名放到password的上方(能夠跟產品聊聊，若是順序無所謂的話)

二、禁用掉瀏覽的自動填充功能

但這個只能依賴於用戶，用戶不由用，你也沒辦法

三、將password拆分到另一個 form 中，這樣，一個form放普通的input，另外一個form放password，兩個form中的域互不干涉，點擊input就不會自動填充了

四、在password上方再新增一個空的input type="text"，並將其隱藏掉