Autofill

Autofill

by Michelle Bu

HTML

<form>
  <label for="cc-number">Card number</label>
  <input id="cc-number" name="cc-number" autocomplete="cc-number" placeholder="4242 4242 4242 4242" />

  <span class="autofilled"></span>
</form>

CSS

input:-webkit-autofill {
  /* Hack to remove background color */
  transition: background-color 10000000s ease-in-out 0s;
  -webkit-animation: 1ms void-animation-in;
}

input {
  -webkit-animation: 1ms void-animation-out;
  background: pink;
}

/* Safari does not trigger animationstart with an empty keyframes block. */
@-webkit-keyframes void-animation-in {
  0% {
    opacity: 1
  }
  100% {
    opacity: 1
  }
}

@-webkit-keyframes void-animation-out {
  0% {
    opacity: 1
  }
  100% {
    opacity: 1
  }
}

JavaScript

document.querySelector('input').addEventListener('animationstart', function(ev) {
  console.log('animationstart', ev.animationName);
  if (ev.animationName === 'void-animation-in') {
    document.querySelector('.autofilled').innerHTML = 'Autofilled';
  } else {
    document.querySelector('.autofilled').innerHTML = '';
  }
});