检测 Firefox 中的自动填充输入答案

【问题标题】：Detect autofilled input in Firefox检测 Firefox 中的自动填充输入
【发布时间】：2018-12-06 22:13:43
【问题描述】：

我需要你的帮助。

我做了一些材料设计，比如我的设计中的输入，但我遇到了自动填充状态的问题。

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

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

这有什么技巧吗？一些 JS 技巧？

谢谢。

【问题讨论】：

这里有我的解决方法：stackoverflow.com/questions/11708092/detecting-browser-autofill/…

标签： javascript css google-chrome firefox autofill

【解决方案1】：

这个问题的答案很简单，你只需要检查输入$(this).val(); 的值它在FF 中有效。

【讨论】：

【解决方案2】：

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

我认为:-moz-autofill 可能会代替:-webkit-autofill。

【讨论】：

我试过了，不幸的是 autocomplete="off" 被浏览器忽略并且 :-moz-autofill 目前不工作

【解决方案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;
}

【讨论】：