A fork of tbosch/autofill-event to be vanilla JS
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
scripts first commit Sep 30, 2015
src
test
third_party/jasmine
.gitignore
LICENSE first commit Sep 30, 2015
README.md
index.html first commit Sep 30, 2015
package.json 1.0.3 Jul 8, 2016

README.md

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