update on input events

README.md

@@ -34,6 +34,12 @@ That changed value is stored on the element in a private property.
 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
 

bower.json

@@ -12,6 +12,6 @@
   ],
   "devDependencies": {
     "jquery": "1.10.2",
-    "angular": "1.2.*"
+    "angular": "1.2.3"
   }
 }

package.json

@@ -6,13 +6,13 @@
     "url": "https://github.com/tbosch/autofill-event.git"
   },
   "devDependencies": {
-    "bower": "~1.2.2",
+    "bower": "~1.3.12",
+    "connect": "2.12.*",
     "karma": "0.10.*",
-    "karma-jasmine": "0.1.5",
     "karma-chrome-launcher": "0.1.2",
     "karma-firefox-launcher": "0.1.3",
-    "karma-junit-reporter": "0.2.1",
-    "connect": "2.12.*"
+    "karma-jasmine": "^0.1.5",
+    "karma-junit-reporter": "0.2.1"
   },
   "licenses": [
     {

src/autofill-event.js

@@ -23,6 +23,12 @@
       findParentForm(target).find('input').checkAndTriggerAutoFillEvent();
     }, 20);
   });
+
+  addGlobalEventListener('input', function(target) {
+    window.setTimeout(function() {
+      findParentForm(target).find('input').checkAndTriggerAutoFillEvent();
+    }, 20);
+  });
 
   function DOMContentLoadedListener() {
     // mark all values that are present when the DOM is ready.
@@ -56,6 +62,9 @@
         markValue(el);
         triggerChangeEvent(el);
       }
+      if (hasBeenNewlyAutoFilled(el)) {
+        triggerAutoFilledEvent(el);
+      }
     }
   }
 
@@ -80,6 +89,32 @@
     el.$$currentValue = el.value;
   }
 
+  function hasBeenNewlyAutoFilled(el) {
+    if (!("$$autoFilled" in el)) {
+      el.autoFilled=false;
+    }
+    var autoFilled = false;
+    var selector;
+    if (!el.$$autoFilled) {
+      try {
+        selector = el.parentNode.querySelector(":autofill");
+      } catch (error) {
+        try {
+          selector = el.parentNode.querySelector(":-webkit-autofill");
+        } catch (error) {
+          try {
+            selector = el.parentNode.querySelector(":-moz-autofill");
+          } catch (error) {
+            // ignore
+          }
+        }
+      }
+      autoFilled = Boolean(selector);
+      el.$$autoFilled = autoFilled;
+    }
+    return autoFilled;
+  }
+
   function addValueChangeByJsListener(listener) {
     var jq = window.jQuery || window.angular.element,
         jqProto = jq.prototype;
@@ -137,6 +172,13 @@
     event.initEvent("change", true, true);
     element.dispatchEvent(event);
   }
+
+  function triggerAutoFilledEvent(element) {
+    var doc = window.document;
+    var event = doc.createEvent("HTMLEvents");
+    event.initEvent("autoFilled", true, true);
+    element.dispatchEvent(event);
+  }
 
 
 

test/unit/autofill-eventSpec.js

@@ -8,6 +8,10 @@ describe('check other inputs when one input fires a blur event', function() {
       event.target.changeEventCount = event.target.changeEventCount || 0;
       event.target.changeEventCount++;
     });
+    container.on('autoFilled', function(event) {
+      event.target.autoFilledEventCount = event.target.autoFilledEventCount || 0;
+      event.target.autoFilledEventCount++;
+    });
   });
 
   afterEach(function() {
@@ -33,6 +37,52 @@ describe('check other inputs when one input fires a blur event', function() {
     expect(spy.mostRecentCall.object[1]).toBe(inputs[1]);
   });
 
+  it('should fire event if the autoFilled is present for the element', function () {
+    jasmine.Clock.useMock();
+    container.append('<form><input type="text" id="id1"></form>');
+    var inputs = container.find('input');
+
+    spyOn(inputs[0].parentNode, 'querySelector').andCallFake(function (selector) {
+      return inputs[0];
+    });
+
+    testutils.triggerInputEvent(inputs[0]);
+    jasmine.Clock.tick(20);
+    expect(inputs[0].autoFilledEventCount).toBe(1);
+    expect(inputs[0].parentNode.querySelector).toHaveBeenCalledWith(':autofill');
+  });
+
+  it('should not fire event if the autofilled has previously been set', function () {
+    jasmine.Clock.useMock();
+    container.append('<form><input type="text" id="id1"></form>');
+    var inputs = container.find('input');
+    inputs[0].value = 'someValue';
+    spyOn(inputs[0].parentNode, 'querySelector').andReturn(inputs[0]);
+    testutils.triggerInputEvent(inputs[0]);
+    jasmine.Clock.tick(20);
+    expect(inputs[0].autoFilledEventCount).toBe(1);
+
+    testutils.triggerInputEvent(inputs[0]);
+    jasmine.Clock.tick(20);
+    expect(inputs[0].autoFilledEventCount).toBe(1);
+
+  });
+
+  it('should send the autofilled event to the correct input', function () {
+    jasmine.Clock.useMock();
+    container.append('<form><input type="text" id="id1"><input type="text" id="id2"></form>');
+    var inputs = container.find('input');
+    spyOn(inputs[0].parentNode, 'querySelector').andCallFake(function (selector) {
+        return inputs[1];
+      }
+    );
+    testutils.triggerInputEvent(inputs[0]);
+    jasmine.Clock.tick(20);
+    expect(inputs[0].autoFilledEventCount).toBe(1);
+    expect(inputs[1].autoFilledEventCount).toBe(1)
+
+  });
+
   describe('checkAndTriggerAutoFillEvent', function() {
     var input;
 
@@ -41,6 +91,31 @@ describe('check other inputs when one input fires a blur event', function() {
       input = container.children().eq(0);
     });
 
+    it('should not fire an extra change event when there was a change event for the element', function() {
+      // Don't use .val as we intercept this!
+      input[0].value = 'someValue';
+
+      testutils.triggerChangeEvent(input[0]);
+      expect(input[0].changeEventCount).toBe(1);
+
+      input.checkAndTriggerAutoFillEvent();
+
+      expect(input[0].changeEventCount).toBe(1);
+    });
+
+    it('should not fire an extra change event when the value did not change', function() {
+      // Don't use .val as we intercept this!
+      input[0].value = 'someValue';
+
+      testutils.triggerChangeEvent(input[0]);
+      input.checkAndTriggerAutoFillEvent();
+
+      testutils.triggerChangeEvent(input[0]);
+      input.checkAndTriggerAutoFillEvent();
+
+      expect(input[0].changeEventCount).toBe(2);
+    });
+
 
     describe('changes by user via change event', function() {
 

test/unit/testutils.js

@@ -3,7 +3,8 @@
   window.testutils = {
     $: window.jQuery || window.angular.element,
     triggerBlurEvent: triggerBlurEvent,
-    triggerChangeEvent: triggerChangeEvent
+    triggerChangeEvent: triggerChangeEvent,
+    triggerInputEvent: triggerInputEvent
   };
 
   function triggerBlurEvent(element) {
@@ -14,6 +15,10 @@
     triggerEvent('change', element);
   }
 
+  function triggerInputEvent(element) {
+    triggerEvent('input',element);
+  }
+
   function triggerEvent(name, element) {
     var doc = window.document;
     var event = doc.createEvent("HTMLEvents");