在Firefox中检测自动填充输入

Question

我需要你的帮助。

我做了一些像我的设计输入的材料设计，但我有自动填充状态的问题。

输入自动填充时，浮动标签不会移动到顶部（在输入中单击它们时）。

我为Chrome解决了这个问题，因为Chrome有:-webkit-autofill伪类但是Firefox呢？

这有什么黑客攻击吗？有些JS技巧？

谢谢。

Answer 1

您是否尝试使用autocomplete="off"作为输入？

我认为:-moz-autofill可能不是:-webkit-autofill。

Answer 2

对此的回答非常简单，你只需要检查输入$(this).val();的值它在FF中工作。

Answer 3

我今天刚刚玩了同样的问题并发现：如果填充输入的css规则被分配给:-webkit-autofill并且后面跟着其他选择器，Firefox就会忽略整套规则。因此我需要将它添加为单独的css规则，即使它们完全相同：

.bmd-input :focus ~ label,
.bmd-input .filled ~ label{
    color: rgba(66,66,66,1);
    font-size: 12px;
    top: 0;
    line-height: 24px;
    cursor: default!important;
}
.bmd-input input:-webkit-autofill ~ label,
.bmd-input textarea:-webkit-autofill ~ label{
    color: rgba(66,66,66,1);
    font-size: 12px;
    top: 0;
    line-height: 24px;
    cursor: default!important;
}
.bmd-input input:-moz-autofill ~ label,
.bmd-input textarea:-moz-autofill ~ label{
    color: rgba(66,66,66,1);
    font-size: 12px;
    top: 0;
    line-height: 24px;
    cursor: default!important;
}