Chrome自動填充正在執行後我的JS

Question

在Chrome中，我創建了表單輸入元素，它有一個標籤，焦點時，浮動在輸入字段上方。這工作和執行完美。

當我使用chrome autofill作爲用戶名和密碼時，瀏覽器使用黃色預先填寫的文本填充輸入字段。我遇到的問題是標籤JS不執行，並在黃色預填文本可見時浮動到右上角。如果您點擊頁面上的任何位置，它會自動更正問題。任何想法或解決方案？我確實需要設置自動完成功能。

Answer 1

當Chrome自動填充輸入時，它不會觸發您的CSS當前依賴的:focus狀態。不幸的是，在CSS中不存在用於檢測輸入是否被填充的僞選擇器（learn more here）。

你最好的選擇是使用jQuery來檢測你的每個輸入是否有一個值，並添加一個類如果是true。請參閱示例here。然後修改您的動畫效果，例如，它適用於input.has-data-class。