Autofill event polyfill

This is a polyfill that fires change events when browsers autofill form fields without firing a change event. The implementation is generic so it works in any application that uses either jQuery and/or Angular.

Test page with manual tests

Install

• bower install autofill-event

Usage

Add the script autofill-event.js after jQuery or Angular in your page.

This will do the following:

• after DOMContentLoaded: check all input fields
• a field is left: check all other fields in the same form

API (to manually trigger the check):

• $el.checkAndTriggerAutoFillEvent(): Execute the check for all DOM elements in the given jQuery / jQLite element.

How it works

1. Remember all changes to input elements by the user (listening for change events) and also by JavaScript (by intercepting $el.val() for jQuery / jQLite elements). 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.

Workaround for Chrome (which won't fill the form contents until th euser has interacted with the form)

1. bind a listener for autoFilled event on your element $el.bind('autoFilled',callback)
2. the callback function will not get called when a form password has been autofilled by Chrome - but Note you still cannot have access to the content of the password until the user has interacted with the form, but you can, at least, make you element respond appropriately to the event (such has by changing the class to your filled style)

Dependencies

AngularJS or jQuery (works with either one or both)

Tests

Unit tests (Travis CI)

1. npm install
2. bower install
3. npm install karma -g
4. Run tests with jQuery: karma start test/unit/config/karma-jquery.conf.js
5. Run tests with Angular: karma start test/unit/config/karma-angular.conf.js

Manual Tests (live version)

1. npm install
2. bower install
3. scripts/webserver.js
4. 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