检测用户是否使用 google chrome 的自动填充选项填写表单

Question

如果有人可以指导我如何检测用户是否使用 google chrome 的自动填充选项填写表单。

我有一个指令，每次用户填写字段并更改模糊时，都会向 google 分析发送一个事件。

但我还需要检测用户是否使用 chrome 的自动填充选项填写表单，并将每个字段的数据推送到 google 分析。

我的部分指令：

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

在这种情况下，检测 Chrome 何时自动填写表单而不是用户填写表单的方法是检测事件是否发生，例如 keyup 事件。考虑下面的 HTML 和 Javascript 块。我的文本输入字段标有最初设置为 false 的数据属性。如果用户通过键入在表单中填写任何内容，则该属性将设置为 true。您记录用户是否填写表单的时刻是在表单提交时。然后你可以检查表单的字段，看看用户是否输入了他或她自己的输入。

<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>

之所以需要使用键盘事件并在提交表单时发送信息，是因为即使用户没有输入任何内容，您也只能在任何字段有值时判断是否发生了自动填充. 这部分不是关于代码，而是更多关于需要做什么才能进行适当的测量。

Answer 2

您可以在此处使用两种方式的数据绑定，并在表单字段上观察 ng 模型的变化

<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>

然后在您的 angular 控制器中，您可以执行此类操作。

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

尽管如此，您可能需要处理一些情况，以防止发送多个请求，因为每次文本字段中的值更改时都会触发 $watch 函数。

这是一个 fiddle 当表单字段中的任何值发生变化时触发 $watch ，无论是通过自动填充还是用户手动输入。

Answer 3

基于input-directive src，angular 为更改、输入、粘贴等情况设置侦听器。

每当浏览器自动填充输入元素时，都会调用此侦听器并通过 $parsers 数组提交 viewValue，截至此处 ngModel directive src。

所以最终你可以避免额外的 scope.$watch 并且仅仅依靠 $parsers 来发送 ga track 事件只是在每个输入元素与指令的链接阶段。顺便说一句，不要忘记在第一次使用后立即销毁解析器功能（即浏览器自动填充），因此它不会在 viewValue 更改时进一步发送垃圾邮件。

这是一个例子：

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);
        }
      }
    };
  });

希望对您有所帮助。

检测用户是否使用 google chrome 的自动填充选项填写表单

Detect if the user fills the form with the autofill option of google chrome

google-analytics

google-chrome

autofill

angularjs

angularjs-directive