Detect if user fills google chrome autocomplete form

Question

If anyone can direct me on how to determine if a user is filling out a google chrome auto-complete form.

I have a directive where every time a user fills a field and changes the blur, he sends an event to Google Analytics.

But also I need to determine if the user filled out the form using the chrome auto-fill function and pressed the data for each of the fields in Google Analytics.

Part of my directive:

element.bind('blur', function (e) { if ((e.target.value !== 0) && typeof value !== 'undefined') { if (_.has(ga_data, 'sendEvent')) { analyticsService.sendEvent(ga_data.sendEvent); } if (_.has(ga_data, 'action') && ga_data.action === 'blur') { analyticsService.sendEvent(ga_data); } } }); 

Answer 1

Based on input-directive src , angular sets the listener for cases of change, input, insert, etc.

And whenever the browser automatically fills the input element, this listener is called, and viewValue is done through an array of $ parsers from here the ngModel src directive .

So in the end, you can avoid the extra area. $ watch and just rely on $ parsers to send a ga track event only by linking the phase of each input element with a directive. And btw do not forget to destroy your func parser immediately after the first use (i.e. the autocomplete browser), so it will not be spammed further in changing viewValue.

Here is an example:

 angular .module('app', []) .directive('detectPrefill', function() { return { require: 'ngModel', link: { pre: function(scope, element, attrs, ctrl) { function detectPrefill (viewValue) { //send GA data //... // just checking that detectPrefill func is destroyed after first usage viewValue && console.log(viewValue); ctrl.$parsers.splice( ctrl.$parsers.indexOf(detectPrefill), 1 ); return viewValue; } ctrl.$parsers.push(detectPrefill); } } }; }); 

Hope this helps.

Answer 2

In this case, the way to detect when Chrome automatically fills out the form, and not the user, is to determine the absence of an event, such as a keyup event. Consider the HTML and Javascript block below. I have a text input field marked with a data attribute initially set to false. If the user fills out something on the form by typing, then the attribute is set to true. The moment you record whether a user fills out a form is in the submit form. Then you can check the form fields and see if the user himself is entered.

 <form onsubmit="dosomething()"> <label for="somefield"></label> <input type="text" id="somefield" onkeyup="this.setAttribute('data-entered', (this.value != '').toString());" data-entered="false" /> <input type="submit" value="submit"/> </form> 

The reason you need to use the keyboard event and send information when submitting the form is because you can only indicate if there was an automatic completion when any of the fields matter, even when the user did not enter anything. the part is less about code, and more about what needs to be done for the correct measurement.

Answer 3

Here you can use two-way data binding and see the ng model in the form field for changes

 <form method="post"> First name:<input type="text" name="fname" ng-model="user.fname"/><br /> Last name: <input type="text" name="lname" ng-model="user.lname"/><br /> E-mail: <input type="text" name="email" ng-model="user.email"/><br /> Phone: <input type="text" name="phone" ng-model="user.phone"/><br /> Address: <input type="text" name="address" ng-model="user.address"/><br /> </form> 

Then inside your angular controller you can do something like this.

 angular.module('app', []).controller('AppController', function($scope){ $scope.user = { }; $scope.$watch('user', function(nv, ov){ console.log(nv); }, true); }); 

In some cases, you may need to process it to prevent multiple requests from being sent, because the $ watch function will fire every time a value in a text field changes.

Here is the fiddle that starts $ watch when some value in the form field changes, whether through auto-completion or manual user input.