1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/**
* Autofill event polyfill ##version:1.0.0##
* (c) 2014 Google, Inc.
* License: MIT
*/
(function(window) {
var $ = window.jQuery || window.angular.element;
var rootElement = window.document.documentElement,
$rootElement = $(rootElement);
addGlobalEventListener('change', markValue);
addValueChangeByJsListener(markValue);
$.prototype.checkAndTriggerAutoFillEvent = jqCheckAndTriggerAutoFillEvent;
// Need to use blur and not change event
// as Chrome does not fire change events in all cases an input is changed
// (e.g. when starting to type and then finish the input by auto filling a username)
addGlobalEventListener('blur', function(target) {
// setTimeout needed for Chrome as it fills other
// form fields a little later...
window.setTimeout(function() {
findParentForm(target).find('input').checkAndTriggerAutoFillEvent();
}, 20);
});
function DOMContentLoadedListener() {
// mark all values that are present when the DOM is ready.
// We don't need to trigger a change event here,
// as js libs start with those values already being set!
forEach(document.getElementsByTagName('input'), markValue);
// The timeout is needed for Chrome as it auto fills
// login forms some time after DOMContentLoaded!
window.setTimeout(function() {
$rootElement.find('input').checkAndTriggerAutoFillEvent();
}, 200);
}
//IE8 compatibility issue
if(!window.document.addEventListener){
window.document.attachEvent('DOMContentLoaded', DOMContentLoadedListener);
}else{
window.document.addEventListener('DOMContentLoaded', DOMContentLoadedListener, false);
}
return;
// ----------
function jqCheckAndTriggerAutoFillEvent() {
var i, el;
for (i=0; i<this.length; i++) {
el = this[i];
if (!valueMarked(el)) {
markValue(el);
triggerChangeEvent(el);
}
}
}
function valueMarked(el) {
var val = el.value,
$$currentValue = el.$$currentValue;
if (!val && !$$currentValue) {
return true;
}
return val === $$currentValue;
}
function markValue(el) {
el.$$currentValue = el.value;
}
function addValueChangeByJsListener(listener) {
var jq = window.jQuery || window.angular.element,
jqProto = jq.prototype;
var _val = jqProto.val;
jqProto.val = function(newValue) {
var res = _val.apply(this, arguments);
if (arguments.length > 0) {
forEach(this, function(el) {
listener(el, newValue);
});
}
return res;
}
}
function addGlobalEventListener(eventName, listener) {
// Use a capturing event listener so that
// we also get the event when it's stopped!
// Also, the blur event does not bubble.
if(!rootElement.addEventListener){
rootElement.attachEvent(eventName, onEvent);
}else{
rootElement.addEventListener(eventName, onEvent, true);
}
function onEvent(event) {
var target = event.target;
listener(target);
}
}
function findParentForm(el) {
while (el) {
if (el.nodeName === 'FORM') {
return $(el);
}
el = el.parentNode;
}
return $();
}
function forEach(arr, listener) {
if (arr.forEach) {
return arr.forEach(listener);
}
var i;
for (i=0; i<arr.length; i++) {
listener(arr[i]);
}
}
function triggerChangeEvent(element) {
var doc = window.document;
var event = doc.createEvent("HTMLEvents");
event.initEvent("change", true, true);
element.dispatchEvent(event);
}
})(window);