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

Question

在 Chrome 中，我创建了具有标签的表单输入元素，当获得焦点时，它会浮动在输入字段上方。这可以完美运行。

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

Answer 1

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

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