Detect autofilled input in Firefox

Question

I need your help.

I made some material design like inputs form my design but I have problem with autofilled state.

Floating labels are not moved to top when inputs are autofilled (they are when clicked in input).

I resolved this for Chrome because Chrome has :-webkit-autofill pseudo class but what about Firefox?

Is there any hack for this? Some JS trick?

Thanks.

Here u have my working workaround: https://stackoverflow.com/questions/11708092/detecting-browser-autofill/65174904#65174904 — Gawrion, Dec 11 '20 at 18:16

score 2 · Answer 1 · answered Mar 14 '19 at 00:18

2

Answer for this was very easy, you just need to check value of input $(this).val(); It works in FF.

answered Mar 14 '19 at 00:18

tottello

69
5

The browser actually prevents exposing the value of the inputs from autofill as a security measure... so there is actually no value, or it is `undefined` – Greg May 10 '22 at 15:21

score 1 · Answer 2 · answered Jun 28 '18 at 15:19

1

Are you try use autocomplete="off" for your input ?

And I think :-moz-autofill may be instead of :-webkit-autofill.

answered Jun 28 '18 at 15:19

hong4rc

3,999
4
21
40

I tried, unfortunetly autocomplete="off" is ignored by browser and :-moz-autofill not working currently – tottello Jun 29 '18 at 10:00

score 0 · Answer 3 · answered Jul 03 '19 at 09:18

I just played with same issue today and found out that: if css rules for filled input are assigned to :-webkit-autofill and followed by other selectors, Firefox just ignore whole set of rules. Therefore i needed to add it as separated css rules even they are totally identical:

.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;
}

Detect autofilled input in Firefox

3 Answers3