Use autofill-event.js to workaround browsers issue: Form model doesn't update on autocomplete

https://github.com/angular/angular.js/issues/1460
This commit is contained in:
Emmanuel ROHEE 2014-09-11 15:07:44 +02:00
parent 6b20fef52a
commit aa347b52ba
2 changed files with 118 additions and 0 deletions

View file

@ -17,6 +17,7 @@
<script src="js/angular-sanitize.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>
<script type='text/javascript' src='js/autofill-event.js'></script>
<script src="app.js"></script>
<script src="config.js"></script>
<script src="app-controller.js"></script>

117
webclient/js/autofill-event.js Executable file
View file

@ -0,0 +1,117 @@
/**
* 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);
});
window.document.addEventListener('DOMContentLoaded', function() {
// The timeout is needed for Chrome as it auto fills
// login forms some time after DOMContentLoaded!
window.setTimeout(function() {
$rootElement.find('input').checkAndTriggerAutoFillEvent();
}, 200);
}, 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.
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);