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

Question

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

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

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

我的指令的一部分:

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

您可以在此处使用两种方式的数据绑定(bind)，并观察表单字段上的 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 Controller 中你可以做这样的事情。

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

在某些情况下，您可能需要处理，以防止发送多个请求，因为每次文本字段中的值发生变化时都会触发 $watch 函数。

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