Обнаружить автозаполненный ввод в Firefox

Question

Мне нужна ваша помощь.

Я сделал дизайн материала, например, входные данные из моего проекта, но у меня проблема с автозаполнением.

Плавающие метки не перемещаются вверх при автозаполнении (они щелкаются при вводе).

Я решил это для Chrome, потому что в Chrome есть :-webkit-autofill псевдокласс, а как насчет Firefox?

Есть ли для этого какой-нибудь взлом? Какой-то трюк с JS?

Спасибо.

Answer 1

Ответить на это было очень просто, нужно просто проверить значение ввода $(this).val(); Работает в FF.

Answer 2

Я только что играл с той же проблемой сегодня и обнаружил, что: если правила 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;
} 

Answer 3

Вы пытаетесь использовать autocomplete="off" для ввода?

И я думаю :-moz-autofill может быть вместо :-webkit-autofill.