首先上設計圖，需要實現的效果：

填寫密碼之前：

填寫密碼前，用戶名和密碼顯示在輸入框內

填寫密碼之后：

填寫密碼以后，用戶名和密碼移動到輸入框以上

問題：需求是非常簡單的，但是問題出在谷歌瀏覽器自動填充密碼的情況下，不知道是因為什么機制，谷歌瀏覽器自動填充上的密碼在js中獲取不到內容，所以無法觸發自動填充上內容的時候文字移動至上方，在表面看來，在頁面初始化的時候，還沒有填充上值，但是js又無法捕捉到是何時填充上的這個值，所以沒辦法觸發js使文字上移，就會造成頁面如下

輸入的值和文字重疊

解決方案：并不是所有版本的谷歌都是打開頁面以后自動填充密碼的，多數版本是點擊密碼以后才填充上去，只需要解決自動填充的情況即可，找了許多辦法，都沒有解決問題，后來發現，谷歌自動填充密碼的時候給input添加了一個偽類：input:-webkit-autofill；進而想到，只要是這個存在，那么說明已經自動填充上了密碼，就可以進行操作使文字上移，但是網上找了很多辦法都無法去監控填充密碼的時候，后來也是用了一個比較笨的辦法來實現，判斷瀏覽器是否是谷歌，如果是谷歌瀏覽器的話，使用了一個定時器，每個一段時間執行一次(我這里設置的是100ms一次)，看這個包含這個偽類的元素是否是存在，一旦找到了，就執行js使文字上移，并且銷毀定時器，但是并不是所有版本的谷歌瀏覽器都是自動填充密碼的，這樣的話不能一直去執行這個定時器，密碼填充雖然我們不確定填充的具體時機，但是無疑是很快的，所以可以設定一個時間，比如1500ms以后還找不到這個元素就代表這個版本的瀏覽器不會自動填充密碼了，就也銷毀這個定時器，比較取巧也比較笨，不過也算實現了想要的效果，有別的方法或者優化歡迎分享

代碼如下：

//?如果是谷歌瀏覽器

if?(navigator.userAgent.indexOf("Chrome")?>?-1)?{

????????var?num?=?0;

????????function?count()?{

??????????num++;

??????????if?($("input:-webkit-autofill").length?>?0?||?num?===?15)?{

????????????$("input:-webkit-autofill").prev().addClass("top");

????????????clearInterval(cout);

????????????return;

??????????}

????????}

????????var?cout?=?setInterval(count,?100);

??????}

備注：在網上看到了一種方法，是這樣，檢測Chrome對自動填充的字段進行的背景顏色更改。Chrome將自動填充字段的背景設為黃色，即使該值不存在，此更改也始終對Javascript可見。在Javascript中檢測到這一點可以讓我們知道該字段已自動填充了一個值，即使我們在Javascript中將該值視為空白也是如此。理論上來說可行，但不知道為什么我沒有檢測到，而且這也是需要時一個動態的檢測，才能夠知道是什么時候發生了變化，而且我發現有一些版本的瀏覽器是藍色，所以誰知道到底有幾種顏色要檢測呢...萬一還有粉色，豈不就尷尬了...