检测用户是否使用谷歌浏览器的自动填充选项填写表单答案

【问题标题】：Detect if the user fills the form with the autofill option of google chrome检测用户是否使用谷歌浏览器的自动填充选项填写表单
【发布时间】：2015-12-08 05:45:31
【问题描述】：

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

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

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

我的部分指令：

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

【问题讨论】：

请原谅我的无知，但 chrome 会自动填充（在页面加载时已经存在）还是自动完成（让您在开始输入时选择要填写的内容）？如果它真的是一个自动填充，你可以将输入绑定到一个 keyup 事件并设置一个标志，如果标志没有改变，那么他们使用自动填充数据

标签： angularjs google-chrome angularjs-directive google-analytics autofill

【解决方案1】：

您可以在这里使用两种方式的数据绑定，并在表单字段上观察 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.module('app', []).controller('AppController', function($scope){
  $scope.user = { };
  $scope.$watch('user', function(nv, ov){
    console.log(nv);
  }, true);
});

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

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

【讨论】：

他不是在问如何检测更改，而是在问如何检测它们是否是通过自动填充进行的。如果您认为上述内容确实如此，那么，请对原因进行一些解释。
但我还需要检测用户是否使用 chrome 的自动填充选项填写了表单，并将每个字段的数据推送到谷歌分析。他的原因想要检测自动填充是因为模糊事件没有被触发，他使用它发送数据，如果他使用$watch，这可以很容易地解决。当然可能需要进行一些修改，但绝对$watch 是这样做的方法。这是fiddle
@MikeFeltman 不，他在问如何检测更改考虑到他当前检测更改的方法在使用自动填充时不起作用。这与真正关心是否使用自动填充略有不同。
是的，Abhishek Sarkar 已经说过了。我会删除评论，因为它本身没有用，但对它的回应是。

【解决方案2】：

在这种情况下，检测 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>

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

【讨论】：

如果我理解正确，它只在我提交表单时运行？我想要做的是，每当您更改每个输入字段的模糊并且这不是 0 时，立即将信息发送到谷歌分析。我已经控制了这部分但是当用户使用自动填充选项填充字段然后在模糊更改而不是在提交事件中向谷歌分析每个信息时，我没有控制这部分。
我不认为模糊事件是最好的选择。我要表达的是，检测它的最佳方法是注意用户实际输入信息的字段。然后，您可以推断，如果值在那里，但用户从未输入任何内容，那么自动填充必须在工作。因为这可以通过两种方式发生 - 自动填充将所有内容都输入，或者用户输入一些内容并自动填充完成其余部分，因此您需要在用户点击提交按钮时检查所有字段。
@JoshuaDannemann 我认为问题在于他依靠模糊事件告诉他在该字段中输入了某些内容。他希望在字段中输入内容时立即做出反应（但不是在用户正在输入时）
@Random832 是的，我明白这一点。但是，将其记录在表单提交之外的任何内容上都是对属性的无效测量。例如，如果您有登录名和密码字段，用户可能会输入他们的用户名，然后 Chrome 会自动填写密码。在这种情况下，如果您将表单标记为手动填写，您只是记录了一些无效的内容。
此外，在交互后立即测量此值的唯一有效方法是将每个表单字段作为单独的维度进行测量，然后在表单提交时，记录哪些字段具有用户未交互的值与。

【解决方案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);
        }
      }
    };
  });

希望这会有所帮助。

【讨论】：