vanilla-autofill-event

This is a fork of autofill-event by TBosch. That shim depends on jQuery on the page this fork does not

Usage no npm install needed!

<script type="module">
  import vanillaAutofillEvent from 'https://cdn.skypack.dev/vanilla-autofill-event';
</script>

README

Autofill event polyfill

This is a fork of autofill-event by TBosch. That shim depends on jQuery on the page this fork does not

This is a polyfill that fires change events when browsers autofill form fields without firing a change event.

Install

  • npm install vanilla-autofill-event

Usage

Add the script autofill-event.js,

This will do the following:

  • after DOMContentLoaded: check all input fields
  • a field is left: check all other fields in the same form
document.querySelector('input').addEventListener('change', function(event) {
  console.log('Got a CHANGE');
});

How it works

  1. Remember all changes to input elements by the user (listening for change events) and also by JavaScript. That changed value is stored on the element in a private property.

  2. Checking an element for auto fill: Compare the current value of the element with the remembered value. If it's different, trigger a change event.

Tests

Unit tests

  1. npm install
  2. npm test

Manual Tests

  1. npm install
  2. scripts/webserver.js
  3. open the manual runner and follow instructions

Notes:

  • They need to be run with a webserver and without iframes, otherwise Chrome would not autofill username/password