Detecting autofilled fields in Javascript
Tags: programming, javascript, frontend, css
Published: 2020-07-15 16:44:17

---
title: Detecting autofilled fields in Javascript
published: true
date: 2016-11-21 11:46:47 UTC
tags: programming,javascript,frontend,css
canonical_url: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
cover_image: https://cdn-images-1.medium.com/max/944/1*tZ6-aMpu-k3J8mR0XTvHZg.png
---

> _This article was originally posted on Medium in 2016. It may be out of date at this point._

When the browser autofills a form field, it adds some styling to highlight which fields it has edited. In Chrome, as you can see above, it adds a lovely yellow background color.

In principle, I think this is a good idea, as it shows the user which fields they should pay attention to in order to see if everything was correctly filled out. However, it will most likely clash with the rest of your sites’ styling, so it would be nice if we could have some more control over it.

```css
input:-webkit-autofill {
    // Much nicer
    background-color: bisque;
}
```

You can add styles by using the vendor prefixed pseudo-class _-webkit-autofill_, but if you need to run some Javascript when a field gets autofilled, it gets a lot trickier.

![](https://cdn-images-1.medium.com/max/916/1*OACF7P1AqnHU4oKLLh8IHw.png)

In [@klarna/ui](https://klarna.github.io/ui/), [Klarna](https://klarna.com)’s open-source UI component toolkit, we use the floating label pattern. The label is initially displayed like a placeholder, and when you start typing it transitions to a small label at the top of the field.

This is done by listening for a change event and adding the class _is-filled_ to the field, which then applies the appropriate zooming and positioning.

![](https://cdn-images-1.medium.com/max/904/1*bNXnDCkiIBL0mspFeTpEBg.png)

However, no event whatsoever is fired when a field is autofilled, so there’s no way to know when to add the class.

_And this is where the hack comes in…_

#### Change event through animation

We can’t know when the field value changes through autofill, but that’s not the only thing that happens when it gets autofilled — some styles are also applied!

Unfortunately, we can’t really listen for a style change, but we can listen for the start of an animation, and we can start an animation in response to autofilling using the previously mentioned _-webkit-autofill_ pseudo-class.

```css
@keyframes onAutoFillStart { from {/\*\*/} to {/\*\*/}}
@keyframes onAutoFillCancel { from {/\*\*/} to {/\*\*/}}

input:-webkit-autofill {
    // Expose a hook for JavaScript when autofill is shown
    // JavaScript can capture 'animationstart' events
    animation-name: onAutoFillStart;

    // Make the background color become yellow really slowly
    transition: background-color 50000s ease-in-out 0s;
}

input:not(:-webkit-autofill) {
    // Expose a hook for JS onAutoFillCancel
    // JavaScript can capture 'animationstart' events
    animation-name: onAutoFillCancel;
}
```

To clarify what’s going on here, we are running the _onAutoFillStart_ animation when the psuedo class _-webkit-autofill_ is active, which it will be when Chrome autofills the input and changes the background color.

Now we can listen for the start of that animation from within our Javascript.

```js
const AUTOFILLED = 'is-autofilled'

const onAutoFillStart = (el) => el.classList.add(AUTOFILLED)

const onAutoFillCancel = (el) => el.classList.remove(AUTOFILLED)

const onAnimationStart = ({ target, animationName }) => {
    switch (animationName) {
        case 'onAutoFillStart':
            return onAutoFillStart(target)
        case 'onAutoFillCancel':
            return onAutoFillCancel(target)
    }
}

document.querySelector('input').addEventListener('animationstart', onAnimationStart, false)
```

Now whenever either the _onAutoFillStart_ or _onAutoFillCancel_ animations start playing, our corresponding functions will run, where we will add or remove the _is-autofilled_ class, or do whatever else we want to do.

![](https://cdn-images-1.medium.com/max/914/1*wFilv4jvpGRB5SFngbiCFw.png)<figcaption>Perfectly aligned labels with orange color to show that the field has been autofilled</figcaption>

I hope this hack will be useful to you. If you want to take a peek at how this is used within [@klarna/ui](https://github.com/klarna/ui), [you can find the implementation of the Field on Github.](https://github.com/klarna/ui/tree/master/Field)