A polyfill to fire a change event when the browser auto fills form fields
Switch branches/tags
Clone or download
2
Latest commit 520e95f Jun 10, 2014
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist @ cdf6c32 added version utils Jan 31, 2014
scripts added version utils Jan 31, 2014
src fix(ie8): support IE8 attachEvent Jun 24, 2014
test fix(events): Don't emit events for inputs that already have filled va… Feb 6, 2014
third_party/jasmine Update Jan 31, 2014
.bowerrc Initial commit Jan 11, 2014
.gitignore Initial commit Jan 11, 2014
.gitmodules added version utils Jan 31, 2014
.travis.yml Update Jan 31, 2014
LICENSE Initial commit Jan 11, 2014
README.md added version utils Jan 31, 2014
bower.json release v1.0.0 Jan 31, 2014
index.html added gh-pages Jan 31, 2014
package.json added version utils Jan 31, 2014

README.md

Build Status

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.

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