Chrome自动填充功能正在我的JS之后执行

Question

在Chrome中，我创建了表单输入元素，这些元素在聚焦时具有标签，浮动在输入字段上方。这可以很好地工作和执行。

当我使用chrome自动填充作为用户名和密码时，浏览器会使用黄色预填充文本填充输入字段。我遇到的问题是标签JS没有执行并且当黄色预填充文本可见时浮动到右上角。如果您单击页面上的任何位置，它会自动更正此问题。任何想法或解决方案？我确实需要设置自动完成功能。

Answer 1

当Chrome自动填充输入时，它不会触发您的CSS当前所依赖的:focus状态。不幸的是，CSS中没有这样的伪选择器来检测输入是否被填充（learn more here）。

您最好的选择是使用jQuery来检测每个输入是否有值，如果为true则添加一个类。请参阅示例here。然后修改动画效果，使其适用于input.has-data-class，例如。